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内 容 简 介 

本 书 从 实践 出 发 ,对 网 站 的 规划 和 网 页 设计 进行 了 较 系统 、 较 全 面 的 介绍 。 网 页 设计 部 分 主要 包括 网 
页 设计 概述 、 网 页 的 版 面 设计 、 网 页 的 色彩 应 用 、 网 页 各 组 成 部 分 的 设计 与 制作 、 网 页 中 按钮 的 制作 及 应 
用 ,以 及 使 用 Photoshop 优化 网 页 。 网 站 规划 部 分 主要 包括 网 站 概述 、 网 站 规划 以 及 网 站 设计 。 本 书 内 容 
涵盖 网 页 设计 与 网 站 规划 , 共 分 10 章 , 书 中 所 有 实例 都 贯彻 了 理论 指导 实践 的 思想 ,综合 实例 章节 还 配 有 
完整 的 设计 实例 。 实 例 讲解 详细 ,而 且 实 用 、 可 行 ,都 是 学 生 能 够 学 会 和 掌握 的 ,通过 本 书 的 学 习 ,学 生 能 
够 掌握 实 实在 在 的 网 站 建设 技能 。 

本 书 是 作者 多 年 教学 实践 成 果 的 汇集 、 提 人 炼 ,同时 参考 了 许多 国内 外 的 文献 。 本 书 还 配 有 相应 的 教学 
辅助 课件 以 及 相关 设计 文件 素材 ,需要 者 可 在 清华 大 学 出 版 社 网 站 (www. tup. tsinghua. edu. cn) 下 载 。 
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应 用 是 推动 学 科技 术 发 展 的 原动力 ,计算 机 科学 是 实用 科学 ,计算 机 科学 技术 广泛 而 深 
人 的 应 用 推动 了 计算 机 学 科 的 飞速 发 展 。 应 用 型 创新 人 才 是 科技 人 才 的 一 种 类 型 ,应 用 型 
创新 人 才 的 重要 特征 是 具有 强大 的 系统 开发 能 力 和 解决 实际 问题 的 能 力 。 培 养 应 用 型 人 才 
的 教学 理念 是 教学 过 程 中 以 培养 学 生 的 综合 技术 应 用 能 力 为 主线 ,理论 教学 以 够 用 为 度 , 所 
选择 的 教学 方法 与 手段 要 有 利于 培养 学 生 的 系统 开发 能 力 和 解决 实际 问题 的 能 力 。 

随 着 我 国 经 济 建设 的 发 展 ,对 计算 机 软件 .计算 机 网 络 、 信 息 系统 、 信 息 服务 和 计算 机 应 
用 技术 等 专业 技术 方向 的 人 才 的 需求 日 益 增 加 ,主要 包括 : 软件 设计 师 ,软件 评测 师 、 网 络 
工程 师 , 信 息 系统 监理 师 ,信息 系 统管 理工 程 师 数据 库 系统 工程 师 、 多 媒体 应 用 设计 师 、 电 
子 商务 设计 师 .嵌入 式 系统 设计 师 和 计算 机 辅助 设计 师 等 。 如 何 构建 应 用 型 人 才 培养 的 教 
学 体系 以 及 系统 框架 ,是 从 事 计算 机 教育 工作 者 的 责任 。 为 此 ,中 国 计 算 机 学 会 计算 机 教育 
专业 委员 会 和 清华 大 学 出 版 社 共同 组 织 启动 了 《中 国 高 等 学 校 计算 机 科学 与 技术 专业 (应 用 
型 ) 学 科教 程 ) 的 项 目 研 究 。 参 加 本 项 目的 研究 人 员 全 部 来 自 国 内 高 校 教 学 一 线 具 有 丰富 实 
践 经 验 的 专家 和 骨干 教师 。 项 目 组 对 计算 机 科学 与 技术 专业 应 用 型 学 科 的 培养 目标 内容 、 
方法 和 意义 ,以 及 教学 大 纲 和 课程 体系 等 进行 了 较 深入 ,系统 的 研究 ,并 编写 了 《中 国 高 等 学 
校 计 算 机 科学 与 技术 专业 (应 用 型 ) 学 科教 程 )( 简 称 (学 科教 程 ))。《 学 科教 程 ) 在 编写 上 注 
意 区 分 应 用 性 人 才 与 其 他 人 才 在 培养 上 的 不 同 ,注重 体现 应 用 型 学 科 的 特征 。 在 课程 设计 
中 (学 科教 程 ) 在 依托 学 科 设计 的 同时 ,更 注意 面向 行业 产业 的 实际 需求 。 为 了 更 好 地 体现 
《学 科教 程 ) 的 思想 与 内 容 , 我 们 组 织 编写 了 《中 国 高 等 学 校 计算 机 科学 与 技术 专业 (应 用 型 ) 
规划 教材 ), 旨 在 能 为 计算 机 专业 应 用 型 教学 的 课程 设置 .课程 内 容 以 及 教学 实践 起 到 一 个 
示范 作用 。 本 系列 教材 的 主要 特点 如 下 : 

1. 完全 按照 (学 科教 程 ) 的 体系 组 织 编写 本 系列 教材 ,特别 是 注意 在 教材 设置 教材 定 
位 和 教材 内 容 的 衔接 上 与 (学 科教 程 ) 保 持 一 致 。 

2. 每 门 课程 的 教材 内 容 都 按照 (学 科教 程 ) 中 设置 的 大 纲 精心 编写 ,尽量 体现 应 用 型 教 
材 的 特点 。 

3. 由 各 学 校 精品 课程 建设 的 骨干 教师 组 成 作者 队伍 ,以 课程 研究 为 基础 ,将 教学 的 研 
究 成 果 引 入 教材 中 。 

4. 在 教材 建设 上 ,重点 突出 对 计算 机 应 用 能 力 和 应 用 技术 的 培养 ,注重 教材 的 实践 性 。 

5. 注重 系列 教材 的 立体 配套 ,包括 教 参 、 教 辅 以 及 配套 的 教学 资源 、 电 子 课件 等 。 

高 等 院 校 应 培养 能 为 社会 服务 的 应 用 型 人 才 , 以 满足 社会 发 展 的 需要 。 在 培养 模式 教 
学 大 纲 、 课 程 体系 结构 和 教材 都 应 适应 培养 应 用 型 人 才 的 目标 .教材 体现 了 培养 目标 和 育 
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人 模式 ,是 学 科 建 设 的 结晶 ,也 是 教师 水 平 的 标志 。 本 系列 教材 的 作者 均 是 多 年 从 事 计算 机 
科学 与 技术 专业 教学 的 教师 ,在 本 领域 的 科学 研究 与 教学 中 积累 了 丰富 的 经 验 ,他 们 将 教学 
研究 和 科学 研究 的 成 果 融 入 教材 中 ,增强 了 教材 的 先进 性 、 实 用 性 和 实践 性 。 

目前 ,我 们 对 于 应 用 型 人 才 培 养 的 模式 还 处 于 探索 阶段 ,在 教材 组 织 与 编写 上 还 会 有 这 
样 或 那样 的 缺陷 ,我 们 将 不 断 完善 。 同 时 ,我 们 也 希望 广大 应 用 型 院 校 的 教师 给 我 们 提出 更 
好 的 建议 。 


《中 国 高 等 学 校 计算 机 科学 与 技术 专业 (应 用 型 ) 规 划 教 材 ) 主 纺 
La 


2008 年 7 月 


Aj Е 


近年 来 , 随 着 网 络 成 为 主流 媒体 的 重要 组 成 部 分 ,网 站 建设 发 展 迅速 ,网 页 设计 的 相关 
技术 和 软件 的 功能 也 不 断 地 更 新 和 快速 地 提升 。 一 个 网 站 的 建设 基于 一 个 网 站 的 规划 ,一 
个 网 站 的 规划 建立 在 各 种 各 样 的 需求 之 上 ,根据 需求 设计 一 个 有 特点 的 网 站 并 不 是 随便 设 
计 就 可 以 做 到 的 ,建站 前 的 网 站 规划 和 建站 时 的 网 页 设计 实际 上 是 一 项 软件 工程 ,网 站 的 成 
功 与 否 和 建站 前 的 网 站 规划 有 着 极为 重要 的 关系 。 

“网 页 设计 与 网 站 规划 ?课程 是 计算 机 、 多 媒体 专业 的 主要 课程 之 一 ,是 一 门 集 技 术 E 
R 工程 实践 于 一 体 的 课程 ,其 内 容 包括 网 页 设计 和 网 站 规划 两 大 主体 内 容 。 本 书 是 专门 为 
“网 页 设计 与 网 站 规划 ”课程 编写 的 教材 ,其 内 容 选取 符合 教学 大 纲要 求 , 比 较 全 面 ,系统 地 
反映 了 网 页 设计 与 网 站 规划 课程 的 全 貌 , 理 论 与 实践 相 结合 , 既 注重 理论 知识 ,又 讲解 实用 
的 技术 应 用 。 使 得 学 生 通 过 本 课程 的 学 习 , 可 以 掌握 网 页 设计 和 网 站 规划 的 基本 知识 ,能 利 
用 当前 最 流行 的 Dreamweaver CS4 和 Photoshop CS4 等 专业 的 软件 工具 进行 网 页 设计 与 
美工 设计 ,学 会 撰写 网 站 策划 书 , 培 养 训 练 实际 工作 的 能 力 。 

本 教材 根据 课程 的 教学 要 求 共 分 为 10 章 。 第 1 章 主 要 介绍 网 页 设计 的 环境 和 基本 流 
程 ,并 讲解 了 网 页 的 基本 概念 ;第 2 章 讲 解 网 页 的 版 面 设 计 相 关 原 则 ;第 3 章 详细 讲解 色彩 
在 网 页 设计 中 的 应 用 ;第 4 章 和 第 5 章 介绍 了 网 页 的 各 个 组 成 部 分 和 按钮 的 制作 及 应 用 ;第 
6 章 讲解 如 何 利 用 Photoshop 优化 网 页 ;第 7 章 介绍 网 站 基础 知识 ;第 8 章 至 第 9 章 介绍 了 
网 站 的 规划 和 设计 的 过 程 和 方法 ,了 解 网 站 策划 书 撰写 的 要 点 ;第 10 章 讲解 了 运用 前 9 章 
的 知识 制作 综合 实例 ,实用 性 极 强 。 本 教材 还 由 浅 入 深 、 从 易 到 难 地 介绍 了 After Effects 
的 高 级 应 用 技巧 ,具有 典型 性 和 代表 性 。 我 们 为 教师 授课 和 读者 自学 提供 了 本 书 案例 中 使 
用 的 素材 ,读者 可 以 从 清华 大 学 出 版 社 网 站 下 载 使 用 。 

本 教材 讲授 可 安排 50 一 60 学 时 。 教 师 可 根据 学 时 、 专 业 和 学 生 的 实际 情况 安排 教学 。 
本 教材 文字 通俗 简明 易 懂 、 便 于 自学 ,也 可 供 从 事 计 算 机 特效 合成 等 工作 的 专业 人 员 或 爱 
好 者 参考 。 

本 教材 由 广州 市 广播 电视 大 学 曾 海 副 教授 、 吴 君 胜 老师 担任 主编 并 组 织 编写 ,广州 市 广 
播 电 视 大 学 钟 彩虹 老师 ,广州 市 轻 工 技师 学 院 梁 国文 老师 担任 副 主 编 。 在 编写 过 程 中 得 到 
了 众多 专家 和 学 者 的 支持 ,参与 本 书 编写 .整理 ,资料 搜集 工作 的 有 屈 军 陈刚. 潘 志 钊 、 传 华 
XE 383 E MNT 

由 于 作者 水 平 有 限 ,热忱 欢迎 广大 师 生 .读者 批评 指正 。 


fd Тг МЖЖ 
2010 年 12 月 


H = 


LEE NE Di Kitu u tl Z u Sua ЕЛКЕ" 


1.1 网 页 的 技术 环境 1 
1.1.1 网 页 编辑 软件 1 
1.1.2 图 像 处 理 软 件 2 
1.1.3 动画 制作 软件 3 
1.1.4 其 他 相关 工具 软件 з 
1.2 网 页 的 媒体 环境 а 
1.2.1 互联 网 的 发 展 4 
1.2.2 手机 的 发 展 5 
1.2.3 创造 和 谐 的 网 络 环境 6 
1.3 网 页 设计 流程 6 
1.3.1 网 页 设计 的 流程 — 7 
1.3.2 网 页 设计 的 注意 事项 8 
习题 1 9 
第 2 章 网 页 的 版 面 设计 QQ... ............................................................................ JÒ) 


2.1 网 站 的 版 面 设计 10 
2.1.1 版 面 编排 原则 10 
2.1.2 选择 页 面 的 大 小 1 
2.2 网 页 布局 13 
2.2.1 常见 的 网 页 布局 类 型 13 
2.2.2 网 页 排版 布局 的 一 般 步 骤 17 
3 用 布局 表格 来 布局 页 面 18 
2.4 图 文 编 排 — 18 
2.5 主体 版 面 设 计 18 
2.5.1 主体 版 面 风格 的 确定 19 
主体 版 面 颜色 搭配 19 
主体 版 面 字体 选择 20 
主题 版 面 的 大 小 控制 。 21 
主体 版 面 的 布局 22 


I9 pe ge pe 
"оёт Pn pv. S 
л ж ою м 


网 页 设计 与 网 站 规划 
2.5.6 主体 版 面 设计 遵循 的 原理 23 


2.6 主体 元 素 的 确定 25 
2.6.1 两 栏 布局 主体 版 面 的 左 栏 制作 25 
2.6.2 两 栏 布局 主体 版 面 的 右 栏 制作 26 
2.6.3 样式 调整 及 修改 26 
2.7 网 页 与 平面 构成 色彩 ,版面 设计 的 关系 28 
2.7.1 网 页 的 平面 构成 设计 28 
2.7.2 色彩 设计 29 
2.7.3 美术 设计 29 
2.7.4 网 页 排版 29 
2.8 网 页 设计 与 传统 版 面 设计 的 比较 30 
2.9 典型 网 站 的 版 面 设计 — 30 
2.9.1 商业 站 点 30 
2.9.2 信息 站 点 31 
2.9.3 娱乐 站 点 31 
2.9.4 门户 站 点 31 
习题 2 зз 


3.1 


3.2 


3.3 


3.4 


3.5 


色彩 的 基本 原理 34 

3.1.1 色彩 的 概念 34 
3.1.2 光 与 色 彩 35 

3.1.3 色彩 的 混合 35 
3.1.4 色彩 的 属性 38 
3.1.5 色 立 体 a 
色彩 与 心理 。 46 

3.2.1 色彩 与 调 性 46 
3.2.2 色彩 的 感觉 。 sa 
3.2.3 色彩 的 联想 55 
3.2.4 色彩 与 季节 57 
色彩 的 对 比 58 

3.3.1 明度 对 比 58 

3.3.2 色相 对 比 60 

3.3.3 纯度 对 比 63 

无 色 系 颜色 与 有 色 系 颜色 的 搭配 应 用 64 
3.4.1 X AKEH ө 
3.4.2 黑色 白色 对 色彩 的 分 隔 作 用 65 
3.4.3 色彩 的 暗 化 与 淡化 65 
色彩 调和 66 

3.5.1 类 似 调和 66 


3.6 


3.5.2 对 比 调 和 68 

色彩 在 网 页 设计 中 的 应 用 
3.6.1 网 页 与 色彩 в 
3.6.2 对 比 与 协调 70 


习题 3 т 


第 4 章 


41 


4.3 


4.4 


网 页 各 组 成 部 分 的 设计 和 制作 oee oee oee eoe se so so soe soe son soe son soe son son son sa e 


网 页 标题 栏 的 设计 和 制作 — 74 

4.1.1 网 页 组 成 简介 74 

4.1.2. 网 页 标题 栏 的 设计 与 制作 75 
4.1.3 Logo 的 设计 与 制作 — 76 
4.1.4 网 页 标题 栏 Banner 的 设计 与 制作 
导航 条 的 设计 与 制作 s 

4.2.1 网 页 导航 条 简介 81 

4.2.2 导航 条 的 设计 要 求 82 
4.2.3 导航 条 的 设计 — 83 

4.2.4 导航 的 位 置 83 

4.2.5 导航 的 方向 83 
广告 栏 的 应 用 84 

4.3.1 网 页 广告 的 定义 84 

4.3.2 网 页 广告 条 的 种 类 和 特点 85 
4.3.3 网 页 广告 条 的 标准 — 86 
4.3.4 网 页 广告 的 应 用 88 

网 页 背景 的 制作 和 应 用 — ss 

4.4.1 网 页 背景 简介 88 

4.4.2 网 页 背景 的 种 类 和 特点 88 
4.4.3 网 页 背景 的 设计 — 90 

4.4.4 网 页 分 层 背景 的 设计 要 点 91 
页 眉 和 页 脚 的 设计 94 

4.5.1 网 页 页 眉 简 介 94 

4.5.2 网 页 页 脚 简介 94 

4.5.3 页 眉 、 页 脚 的 设计 95 


习题 4 95 


网 页 中 按钮 的 制作 及 应 用 = 


按钮 与 网 页 的 关系 96 

按钮 的 设计 原则 105 
常见 按钮 样式 的 制作 105 
5.3.1 网 页 中 的 按钮 设计 105 
5.3.2 简单 按钮 的 制作 106 


4 


5.3.3 水 蝇 按钮 。 110 
5.4 导航 条 的 制作 。 13 
5.5 动态 按钮 的 制作 116 
习题 5 126 


第 6 章 用 Photoshop 优化 Web 页 ы nnn nn ы nnn nnn nn nnn nnn nnn 


6.1 优化 图 像 — 127 


网 页 设计 与 网 站 规划 


6.1.1 图 片 优化 基本 原则 127 


6.1.2 GIF 图片 的 优化 处 理 
6.2 制作 Web 图 片 库 ”130 
6.3 GIF 动画 在 网 页 中 的 制作 与 运用 
6.3.1 XEM imi 131 
6.3.2 GIF 动画 的 制作 步骤 


6.4 网 页 背景 无 颖 贴图 的 制作 138 


128 


131 


133 


6.4.1 感受 无 终 平 铺 图 案 138 


6.4.2 无 颖 平 铺 图 案 深度 分 析 


140 


6.4.3 用 Photoshop* 位 移 滤 镜 ” 制 作 平 铺 图 案 142 
6.4.4 ”常用 无 颖 拼接 图 案 的 制作 方法 145 


6.5 图 层 样式 在 网 页 中 的 运用 149 


6.5.1 图 层 样式 详解 149 


6.5.2 利用 图 层 样式 设计 个 性 化 网 页 界面 实例 151 


习题 6 156 
第 7 章 网 站 概述 ee 


7.1 网 站 的 组 成 157 
7.1.1 网 页 157 
7.1.2 网 站 空间 157 
7.1.3 网 址 158 
7.1.4 域名 158 

网 站 的 分 类 159 
政府 网 站 159 
企业 网 站 161 
综合 类 网 站 161 
搜索 引擎 网 站 162 
教育 类 网 站 165 


әд 
ко 


чо m = оо мә к 


个 人 网 站 165 
165 


第 8 章 网 站 规划 设计 
8.1 确定 网 站 类 型 166 


“ЗЧ жу эй сы эз Gg SS: эч 


M 
[i 


电子 商务 类 网 站 165 


了 27 


= СУ 


综合 信息 门户 网 站 — 167 
普及 型 网 站 168 

电子 商务 网 站 169 
媒体 信息 类 网 站 171 

办 公事 务 管 理 网 站 — 172 
娱乐 性 网 站 — 173 
定位 网 站 主题 与 名 称 173 
8.2.1 网 站 设计 主题 分 析 — 174 
8.2.2 网 站 的 名 称 分 析 175 
确定 网 站 内 容 176 

8.3.1 网 站 内 容 的 分 类 176 
8.3.2 网 站 内 容 设 计 原 则 177 
8.3.3 网 站 应 该 包括 的 十 项 内 容 177 
网 站 界面 规划 179 

8.4.1 栏目 与 板块 编排 179 
8.4.2 目录 结构 与 链接 结 180 
8.4.3 版 面 布局 181 

网 站 策划 书 撰写 要 点 182 

建立 网 站 的 目的 和 功能 定位 182 
网 站 的 需求 分 析 和 规划 — 182 
域名 和 网 站 名 称 的 选择 183 
网 站 的 主要 功能 。 183 

网 站 技术 解决 方案 183 
网 站 内 容 规划 — 185 

网 站 测试 185 

网 站 发 布 186 

.9 网 站 推广 186 

.10 网 站 维护 186 

.11 网 站 财务 预算 187 


э ро go go go go 
UMP ME OM IE ONE 


сз сл & ою го on 


op go go go go go go ро go go 
té A pt bv wy PY bv оо р © 
o 0 «oO 9€. Us P F> 


习题 8 188 


9.2 


9.3 
9.4 


КНН энн ана н ере ае ныны ыы KON ркы RR нанай с БЕ АЕ SB, 


定位 网 站 的 CI 形象 — 189 

9.1.1 设计 网 站 的 标志 190 
9.1.2 设计 网 站 Banner 196 
网 站 的 整体 风格 和 创意 设计 202 
9.2.1 网 站 的 整体 风格 202 
9.2.2 网 站 的 创意 设计 209 
网 站 功能 设计 210 

网 站 设计 流程 212 


9.4.1 
9.4.2 
9.4.3 
9.4.4 
9.4.5 


网 页 设计 与 网 站 规划 
网 站 需求 分 析 212 

网 站 规划 213 

项 目 实施 214 

宣传 推广 215 

网 站 维护 220 


习题 9 222 


第 10 章 1 ................................................................................. 


10.1 数码 产品 MiniSite 设计 实例 223 


10. 1. 


1 


什么 是 MiniSite 224 


10.1.2 需求 分 析 227 
10.1.3 ”版面 设计 228 
10.1.4 功能 实现 231 
10.2 企业 网 站 设计 实例 241 


10. 2. 
10. 2. 
10. 2. 
10.2. 
10.2. 
10.2. 
习题 10 


1 


制作 企业 网 站 要 注意 什么 。 242 
需求 分 析 245 

数据 库 设计 246 

版 面 设计 251 

功能 实现 253 

测试 与 维护 262 


223 


264 


| Chapter 


本 章 知 识 点 

。 网 页 的 技术 环境 

。 媒体 环境 

。 设计 流程 

本 章 学 习 目标 

° 了 解 网 页 的 技术 环境 

。 了 解 媒 体 环境 

。 掌握 设计 流程 

随 着 互联 网 知识 的 普及 ,人 们 的 生活 日 益 与 网 络 联系 在 了 一 起 , 越 来 越 多 的 人 认识 到 网 
页 设计 的 重要 性 。 一 个 网 站 可 以 是 一 个 公司 或 一 个 人 的 网 上 名 片 。 当 网 站 代表 一 个 公司 的 
时 候 , 可 以 通过 吸引 更 多 浏览 者 的 方式 ,创造 更 多 的 商业 机 会 ,促进 公司 更 多 的 产品 和 服务 
的 最 终 销售 ,有 利于 获得 更 多 的 投资 回报 率 。 

网 页 设计 是 指 平面 设计 的 视觉 艺术 效果 运用 和 网 络 技术 实现 的 有 机 结合 。 设 计 精良 的 
网 页 具有 很 强 的 视 沉 效果、 互动 性 \ 互 操作 性 \ 受 众 面 广 等 其 他 媒体 所 不 具有 的 特点 ,成 为 区 
别 于 报刊 .影视 的 一 个 新 媒体 。 它 既 拥有 传统 媒体 的 优点 ,同时 又 使 信息 传播 变 得 更 为 直 
观 , 便 捷 、 高 效 ;为 了 适应 当今 时 代 发 展 的 要 求 , 必 须 增 加 艺术 设计 院 校 的 网 页 设计 课程 ;为 
了 更 好 地 体现 网 页 这 一 新 型 设计 的 特点 ,将 它 和 传统 媒体 进行 比较 ,了 解 它 的 优势 所 在 ;一 
个 成 功 的 网 页 设计 ,首先 在 思想 上 要 确立 动态 的 思维 方式 ,其 次 .要 有 效 地 将 图 形 引入 网 页 
设计 之 中 ,增加 人 们 浏览 网 页 的 兴趣 ,在 崇尚 鲜明 个 性 风格 的 今天 ,网 页 设计 应 增加 个 性 化 
因素 。 


1.1 网 页 的 技术 环境 


所 谓 网 页 的 技术 环境 是 指 制作 网 页 可 使 用 的 软件 ,及 这 些 软件 的 水 平和 发 展 的 动向 。 
本 节 介绍 制作 网 页 过 程 中 常用 到 的 编辑 软件 ,网 页 图 片 处 理 常用 软件 ,制作 动画 的 处 理 软 
件 , 以 及 一 些 较为 实用 的 小 软件 。 本 书 只 提供 这 些 软件 的 大 概 功用 及 优势 ,至 于 如 何 操作 应 
用 ,读者 可 以 找 专门 的 教材 来 学 习 。 


1.1.1 网 页 编辑 软件 


网 页 编辑 软件 非常 多 , 随 着 技术 的 不 断 发 展 , 针 对 不 同 技术 脚本 的 软件 应 运 而 生 , 目 前 
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流行 的 网 页 制作 软件 有 如 下 几 个 。 

1. FrontPage 

FrontPage 是 微软 公司 (Microsoft) 开 发 的 一 套用 来 创建 互联 网 站 的 软件 包 。 它 提供 使 
站 点 保持 最 新 和 无 错 状态 所 需 的 工具 。 使 用 者 可 以 很 容易 地 管理 网 站 的 内 容 、 超 链接 、 页 面 
和 发 布 ,所 有 这 一 切 全 都 通过 一 个 简单 的 界面 来 完成 。 

FrontPage 也 是 所 见 即 所 得 网 页 制作 软件 中 的 佼佼 者 。 即 使 你 不 具备 写作 网 页 的 基 
础 ,也 不 懂 HTML 语言 ,也 可 在 短 时 间 之 内 整合 构成 网 页 的 文字 、 图 像 、 声 音 和 其 他 元 素 ， 
制作 出 一 幅 亮 丽 的 网 页 。 作 为 网 页 制作 的 初学 者 ,“ 所 见 即 所 得 ”的 方式 使 软件 很 容易 
ET. 

2. Dreamweaver 

Dreamweaver 是 Macromedia 公司 推出 的 可 视 化 网 页 制作 工具 ,后 来 被 Adobe 公司 收 
购 ,是 较 受 网 页 设计 人 员 欢 迎 的 网 页 制作 软件 之 一 。 

它 是 可 视 化 的 网 页 编辑 软件 ,能 快速 地 创建 极 具 动 感 的 网 页 ,还 提供 了 强大 的 网 站 管理 
功能 。 许 多 专业 的 网 站 设计 人 员 都 将 Dreamweaver 作为 创建 网 站 的 首选 工具 。 

使 用 网 站 地 图 可 以 快速 制作 出 网 站 和 雏形, 设计、 更 新 和 重组 网 页 。 改 变 网 页 位 置 或 档案 
名 称 ,Dreamweaver 会 自动 更 新 所 有 和 链接。 使 用 支援 文字 、HTML 码 HTML 属性 标签 和 
一 般 语 法 的 搜寻 及 置换 功能 使 得 复杂 的 网 站 更 新 变 得 迅速 又 简单 。 


1.1.2 图 像 处 理 软件 


做 网 页 需要 一 定 的 平面 设计 基础 。 如 果 设 计 者 只 会 写 程序 ,没有 一 定 的 平面 设计 功底 ， 
即便 程序 编写 得 再 好 ,没有 美观 的 界面 为 依托 ,还 是 没有 人 愿意 来 浏览 所 做 的 网 页 。 

1. Photoshop 

Photoshop 是 美国 Adobe 公司 出 品 的 软件 , 它 的 功能 完善 ,性 能 稳定 ,在 图 像 编 辑 、 修 改 
制作 ,网 站 设计 等 方面 得 到 广泛 应 用 。 该 软件 在 Web 的 应 用 方面 主要 用 于 创建 网 页 上 使 用 
的 图 像 文件 ;在 桌面 出 版 方面 主要 用 于 创建 用 于 印刷 的 图 像 作品 等 。 

Photoshop 除了 属于 网 页 编辑 软件 ,更 是 一 款 强大 的 图 片 处 理 软 件 ,用 Photoshop 制作 
出 的 网 页 更 加 精细 。 

2. Fireworks 

Fireworks 是 由 Macromedia 公司 开发 的 网 页 制作 软件 ,现在 属于 Adobe 公司 , 在 绘图 
方面 Fireworks 结合 了 位 图 以 及 矢量 图 处 理 的 特点 ,不仅 具备 复杂 的 图 像 处 理 功 能 ,并 且 还 
能 轻松 地 把 图 形 输出 到 Flash、Dreamweaver 以 及 第 三 方 的 应 用 程序 。 

3. ACDSee 

ACDSee 是 目前 最 流行 的 数字 图 像 处 理 软 件 , 它 提供 了 良好 的 操作 界面 ,简单 人 性 化 的 操 
作 方 式 ,优质 的 快速 图 形 解 码 方式 和 强大 的 图 形 文件 管理 功能 等 ,还 支持 丰富 的 图 形 格式 。 

4. Image Ready 

Image Ready 是 由 Adobe 公司 开发 的 ,以 处 理 网 络 图 形 为 主 的 图 像 编 辑 软件 。 如 果 
Photoshop 是 网 页 设计 专用 图 像 工 具 的 话 ,Image Ready 就 会 被 完全 吸收 在 Photoshop 中 ， 
就 不 会 有 独立 运行 的 软件 形式 。 因 为 Photoshop 也 应 用 在 网 页 设计 之 外 的 许多 领域 ,所 以 
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不 能 完全 为 了 网 页 设计 而 优化 ,于 是 独立 制作 了 Image Ready 这 样 一 个 针对 网 络 设计 的 软 
件 。 利 用 Image Ready 可 以 将 Photoshop( 简 称 PS) 的 图 像 操作 最 优化 ,使 其 更 适合 网 页 设 
计 , 也 可 以 通过 分 割 图 像 自动 制作 HTML 文档 ,还 可 以 制作 简单 的 GIF 动画 , 它 是 专门 的 
网 络 图 像 处 理工 具 。 综 合 来 看 ,Image Ready 是 个 很 有 特色 的 产品 ,对 网 页 设计 者 来 说 是 个 
不 错 的 选择 。 


1.1.3 动画 制作 软件 


网 页 的 动画 一 般 分 为 两 种 , 即 GIF 动画 和 Flash 动画 。 这 两 种 动画 都 可 以 通过 Flash 
软件 来 完成 ,而 GIF 动画 有 很 多 种 工具 可 以 实现 ,Flash 的 文字 动画 也 有 专门 的 工具 ,这 些 
工具 对 于 想 做 出 好 的 动画 ,又 不 能 熟练 使 用 Flash 上 网 制作 者 提供 了 极 大 的 方便 。 下 面 就 
一 些 常用 工具 简要 地 做 一 下 介绍 。 

1. Flash 

Flash 是 美国 的 Macromedia 公司 于 1999 年 6 月 推出 的 优秀 网 页 动画 设计 软件 。 它 是 
一 种 交互 式 动画 设计 工具 ,用 它 可 以 将 音乐 .声效 ,动画 以 及 富有 新 意 的 界面 融合 在 一 起 ,以 
制作 出 高 品质 的 网 页 动态 效果 。Macromedia 开发 的 Dreamweaver, Fireworks, Flash 被 称 
为 “网 页 三 剑客 ”, 后 来 均 被 Adobe 公司 收购 。 

2. MUR DEZ 

硕 思 闪 客 之 锤 是 一 款 具 有 专业 水 准 的 动画 制作 工具 。 它 支持 图 形 设计 、 运 动 动画 .引导 
线 、 遗 单 效果 ` 流 声音 和 事件 声音 、 帆 标记、 设置 电影 剪辑 .按钮 等 符号 。 

3. 硕 思 闪 客 巫师 

硕 思 闪 客 巫师 是 一 种 可 以 快速 创建 专业 的 Flash 按钮 的 便捷 工具 。 它 提供 了 200 多 个 
设计 精美 的 模板 和 大 量 精心 挑选 的 矢量 图 .背景 图 .mp3 和 Wav 声音 效果 。 在 这 里 不 需要 
专业 的 美术 设计 技术 ,只 需要 简单 地 拖拉 就 可 以 设计 出 各 种 各 样 的 按钮 .导航 条 、Logo 等 
效果 。 

4. GIF 动画 制作 软件 GIF Movie Gear 3. 0 

GIF Movie Gear 3. 0 是 一 款 GIF 动画 制作 软件 ,几乎 拥有 所 有 制作 GIF 动画 的 编辑 功 
能 ,无 须 再 用 其 他 的 图 形 软件 辅助 。 


1.1.4. 其 他 相关 工具 软件 


在 制作 网 页 过 程 中 ,常常 需要 做 一 些 特 殊 处 理 , 这 时 一 些小 工具 软件 就 可 以 帮忙 ,简便 
地 做 出 一 些 特别 的 效果 。 下 面 介绍 几 个 常用 的 小 工具 软件 。 

1. Just Button 

Just Button 是 个 傻瓜 型 的 按钮 制作 工具 .用户 没 必 要 有 丰富 的 专业 知识 ,只 要 选择 软 
件 提 供 的 各 式 各 样 的 按钮 颜色 和 式样 ,再 简单 地 加 入 按钮 上 面 的 文件 就 行 了 。 

2. 有 声 有 色 

“有 声 有 色 ” 集 合 了 458 个 十 分 精彩 的 JavaScript 小 程序 ,真正 做 到 了 与 特效 源 程序 相 
融合 ,每 一 个 特效 制作 窗口 均 为 可 视 化 制作 界面 ,所 有 特效 操作 只 需要 用 户 轻 轻 点 几 下 鼠标 
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就 可 以 完成 ! 独特 的 特效 自动 插入 功能 ,可 以 将 特效 自动 插入 到 网 页 中 ;内 码 转换 功能 可 以 
帮 用 户 在 繁体 中 文 (BIG5 ) 与 简体 中 文 (GB2312) 之 间 转 换 ; 网 页 压缩 功能 可 以 压缩 网 页 大 
小 ,而 不 影响 正常 浏览 ,减少 网 页 下 载 时 间 ;屏幕 取 色 功 能 ,可 以 获取 计算 机 屏幕 上 显示 的 任 
何 一 种 颜色 ;即时 预览 功能 可 以 使 用 户 即 时 预览 所 制作 的 特效 。 

3. 网 页 特效 魔法 师 

“网 页 特效 魔法 师 ? 是 一 个 可 以 自动 生成 网 页 特效 的 软件 ,收集 了 包括 时 间 特 效 ,文字 特 
效 、 图 形 图 像 处 理 、 鼠 标 特效 、 页 面 特效 “小 甜 饼 ”在 线 游戏 、 其 他 特效 在 内 的 8 类 共 62 个 
特效 。 这 些 特效 都 是 使 用 率 比 较 高 的 JavaScript 代码 ,可 以 直接 使 用 。 软 件 还 提供 了 智能 
化 的 网 页 特效 制作 向 导 ,用户 可 以 在 向 导 的 指导 下 一 步 一 步 地 制作 自己 的 网 页 特效 ,在 进行 
每 一 步 操作 时 ,软件 都 会 给 出 提示 信息 ,指导 用 户 操作 。 软 件 还 内 置 了 浏览 器 ,用 户 可 以 随 
时 预览 特效 效果 ;特效 制作 好 之 后 ,可 以 把 它 复制 到 剪贴 板 ,或 者 保存 到 文件 中 。 软 件 的 界 
面 美观 新 颖 ,操作 简单 明了 , 极 易 上 手 。 

4. 网 友 减 肥 茶 

网 友 减 肥 茶 可 以 将 网 页 文件 压缩 ,最 大 可 压缩 至 原 大 小 的 50% ,压缩 后 可 直接 读 取 ,与 
压缩 前 完全 一 样 ,压缩 后 可 以 根据 需要 进行 还 原 。 


1.2 网 页 的 媒体 环境 


网 页 的 媒体 环境 , 指 的 是 网 页 传播 媒介 的 环境 。 网 页 主要 运用 在 互联 网 、 移 动 设备 、 移 
动 电视 .数字 娱乐 ,触摸 媒体 等 方面 .这些 方面 基本 上 都 是 通过 网 络 来 链接 的 。 

除 互 联网 外 ,现在 手机 的 影响 力也 在 日 益 上 升 。 互 联网 主要 是 以 WWW 的 网 页 为 主 ， 
手机 主要 是 以 WAP 的 网 页 为 主 。 


1.2.1 互联 网 的 发 展 


Internet 发 展 经 历 了 研究 网 .运行 网 和 商业 网 3 个 阶段 。 至 今 , 全 世界 没有 人 能 够 知道 
Internet 的 确切 规模 。Internet 正 以 当初 人 们 始 料 不 及 的 惊人 速度 向 前 发 展 , 今 天 的 
Internet 已 经 从 各 个 方面 逐渐 改变 了 人 们 的 工作 和 生活 方式 。 人 们 可 以 随时 从 网 上 了 解 当 
天 最 新 的 天 气 信 息 、 新 闻 动 态 和 旅游 信息 ,可 看 到 当天 的 报纸 和 最 新 杂志 ,可 以 足 不 出 户 在 
家 里 炒股 .网 上 购物 ,收发 电子 邮件 .享受 远程 医疗 和 远程 教育 等 。Internet 的 意义 并 不 在 
于 它 的 规模 ,而 在 于 它 提 供 了 一 种 全 新 的 全 球 性 的 信息 基础 设施 。Internet 已 经 构成 全 球 
信息 高 速 公 路 的 雏形 和 未 来 信息 社会 的 蓝图 。 纵 观 Internet 的 发 展 史 ,可 以 看 出 Internet 
的 发 展 趋势 主要 表现 在 如 下 几 个 方面 : 

1. 运营 产业 化 

以 Internet 运营 为 产业 的 企业 迅速 崛起 ,从 1995 年 5 月 开始 ,多 年 资助 Internet 研究 
开发 的 美国 科学 基金 会 (NSF) 退 出 Internet, J! NFS net 的 经 营 权 转 交 给 美国 3 家 最 大 的 
私营 电信 公司 ( 即 Sprint; MCI 和 ANS) .这 是 Internet 发 展 史上 的 重大 转折 。 
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2. 应 用 商业 化 

随 着 Internet 对 商业 应 用 的 开放 , 它 已 成 为 一 种 十 分 出 色 的 电子 化 商业 媒介 REA 
司 、 企 业 不 仅 把 它 作 为 市 场 销售 和 客户 支持 的 重要 手段 ,而且 把 它 作为 传真 .快递 及 其 他 通 
信 手 段 的 廉价 替代 品 ,借以 形成 与 全 球 客户 保持 联系 和 降低 日 常 的 运营 成 本 。 如 电子 邮件 、 
IP 电话 、 网 络 传真 VPN 和 电子 商务 等 日 渐 受 到 人 们 的 重视 就 是 最 好 例证 。 

3. 互联 全 球 化 

Internet 虽然 已 有 大 约 30 年 的 发 展 历史 ,但 早期 主要 是 限于 美国 国内 的 科研 机 构 、 政 
府 机 构 和 它 的 盟国 范围 内 使 用 。 现 在 就 不 一 样 了 , 随 着 各 国 纷纷 提出 适合 本 国 国情 的 信息 
高 速 公 路 计划 ,已 迅速 形成 了 世界 性 的 信息 高 速 公 路 建设 热潮 ,各 个 国家 都 在 以 最 快 的 速度 
JE À Internet, 

4. 互联 宽带 化 

随 着 网 络 基 础 的 改善 .用 户 接 入 方面 新 技术 的 采用 、 接 入 方式 的 多 样 化 和 运营 商 服务 能 
力 的 提高 , 接 和 网 速率 慢 形成 的 瓶颈 问题 将 会 得 到 进一步 改善 ,上 网 速度 将 会 更 快 ,带宽 瓶 
颈 约束 将 会 消除 ,互联 必然 宽带 化 ,从 而 促进 更 多 的 应 用 在 网 上 实现 ,满足 用 户 多 方面 的 网 
络 需 求 。 

5. 多 业务 综合 平台 化 、 智 能 化 

随 着 信息 技术 的 发 展 ,互联 网 将 成 为 图 像 、 话 音 和 数据 “三 网 合 一 ”的 多 媒体 业务 综合 
f ,并 与 电子 商务 .电子 政务 .电子 公务 .电子 医务 .电子 教学 等 交叉 融合 。 继 报刊 .广播 和 电 
视 的 影响 力 之 后 ,互联 网 逐渐 成 为 “第 四 媒体 ”。 


1.2.2 手机 的 发 展 


移动 设备 的 范围 很 广 ,包括 手机 、 移 动 硬盘 、 小 灵通 、U 盘 、MP3 播放 器 .PSP 等 。 但 可 
以 通过 浏览 器 使 用 网 络 来 打开 网 页 的 却 只 有 手机 。 大 部 分 手机 配置 的 浏览 器 只 能 支持 
WAP 网 页 。 但 也 有 少 部 分 手机 已 经 拥有 完整 的 浏览 器 ,可 以 正常 打开 标准 HTML 网 页 。 
诺基亚 对 移动 手机 融合 做 过 全 球 调研 。 在 这 项 包括 中 国 、 法 国 、 印 度 、 日 本 、 美 国 等 11 个 国 
家 在 内 的 全 球 性 调研 中 ,诺基亚 有 三 个 主要 的 发 现 : 目前 全 球 几 乎 每 两 个 人 中 就 有 一 个 将 
他 们 的 手机 作为 主要 的 相机 使 用 ;超过 三 分 之 二 的 人 预言 音乐 手机 将 会 取代 他 们 的 MP3 播 
放 器 ;半数 以 下 的 人 们 希望 将 移动 设备 与 他 们 的 家 庭 电 器 相连 。 

1. 多 功能 移动 设备 已 取代 某 些 小 型 电子 产品 

在 人 们 的 生活 中 ,多 功能 手机 已 经 取代 了 某 些小 型 电子 产品 。 将 近 一 半 的 调研 回复 者 
(44%) 将 他 们 的 移动 终端 作为 首选 相机 ,其 中 以 印度 的 比例 为 最 高 (68%)。 全 球 而 言 , 现 在 
已 有 72% 的 人 不 再 单独 使 用 闹钟 ,73% 的 人 将 他 们 的 手机 作为 主要 的 钟表 。 在 中 国 , 这 一 
比例 是 84%. 

关于 在 移动 状态 下 进行 网 络 冲浪 的 问题 ,超过 1/3 的 回答 者 (36%) 说 他 们 每 月 至 少 一 
次 在 移动 终端 上 进行 网 络 浏览 。 毫 无 疑问 ,日 本 是 移动 互联 网 使 用 的 先驱 ,37% 的 用 户 承 认 
每 天 都 会 进行 移动 冲浪 。 

手机 的 功能 还 在 不 断 丰 富 , 没 有 手机 的 生活 是 不 能 想象 的 : 94% 的 受 访 者 计划 在 将 来 
拥有 一 款 手 机 。 巴 西 人 如 此 热爱 手机 一 一 100% 的 受 访 者 相信 自己 将 会 在 几 年 之 内 拥有 一 
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部 手机 。 事 实 上 ,手机 是 如 此 的 不 可 或 缺 , 超 过 1/5 的 人 (21%) 表 示 , 丢 失手 机 会 比 丢 失手 
表 、 信 用 卡 甚 至 结婚 戒指 更 让 他 们 感到 诅 形 。 在 中 国 , 这 一 比例 高 达 4094. 

2. 音乐 手机 将 成 为 未 来 数字 音乐 消费 的 核心 

数字 音乐 已 经 完全 重 塑 了 人 们 购买 和 聆听 音乐 的 习惯 : 调研 发 现 ,全 球 67% 的 人 现在 
会 下 载 相当 比 例 的 音乐 ;87% 的 人 声称 ,自从 拥有 一 个 数字 音乐 设备 后 ,他 们 拥有 的 音乐 数 
量 已 经 增加 了 。 德 国人 听 音 乐 的 时 间 最 多 : 28% 的 人 承认 每 周 会 听 21 小 时 甚至 更 长 时 间 
的 音乐 。 人 们 在 听 些 什么 呢 ? 流行 乐 (35%) ERROA) Е CS 40 古典 乐 (7%)。 而 
中 国人 喜爱 流行 乐 的 比例 高 达 54% 。 可 见 支持 音乐 功能 的 移动 终端 将 成 为 未 来 数字 音乐 
消费 的 核心 : 67% 的 人 预言 手机 将 会 取代 他 们 的 MP3 播放 器 。 

3. 希望 手机 扮演 家 庭 远 程控 制 者 的 角色 

根据 诺基亚 的 调研 ,全球 范围 内 几乎 一 半 的 回答 者 (42%) 希 望 他 们 的 打印 机 、 计 算 机 、 
立体 声音 响 、 电 视 与 移动 终端 互相 连接 。 展 望 未 来 ,超过 一 半 的 受 访 者 (58%) 和 希望 能 够 通过 
移动 终端 控制 他 们 所 有 的 家 用 电器 。 

由 此 可 以 得 知 ,多 媒体 的 手机 与 人 们 的 生活 已 经 密切 相关 , 随 着 它 的 智能 功能 的 不 断 开 
发 ,对 于 人 们 生活 的 影响 力也 会 越 来 越 大 。 诺 基 亚 大 中 国 区 多 媒体 业务 部 销售 和 渠道 发 展 
副 总 裁 黄 伽 卫 说 :“ 以 上 调查 结果 强 有 力 地 证 明了 人 们 真 的 需要 一 部 多 媒体 手机 来 实现 拍 
照 ` 欣 赏 音乐 以 及 遥控 家 用 电器 ,未 来 多 媒体 手机 的 发 展 空间 将 十 分 巨大 。” 


1.2.3 创造 和 谐 的 网 络 环境 


在 网 络 日 益 重 要 的 今天 ,建设 一 个 和 谐 健康 的 网 络 环境 日 益 重 要 ,关系 到 中 国 的 未 来 。 
由 于 人 们 的 生活 .工作 范围 ,精力 有 限 , 不 可 能 对 于 他 们 有 关 或 者 无 关 的 整体 环境 和 众多 信 
息 都 保持 经 常 性 高 度 关注 和 接触 ,对 于 自己 有 限 的 视野 以 外 的 领域 ,人 们 只 能 透 过 一 些 媒体 
的 报道 来 得 知 。 而 互联 网 与 移动 设备 的 作用 就 显得 非常 之 大 。 对 于 今天 网 络 极为 发 达 的 社 
会 有 着 重大 的 影响 。 所 以 保持 一 个 干净 的 网 络 环境 是 十 分 重要 的 。 

由 国务 院 新 闻 办 、` 工 业 和 信息 化 部 .公安 部 等 七 部 门 在 全 国 开展 的 整治 网 络 低俗 之 风 专 
项 行动 受到 了 普遍 关注 和 支持 ,部 分 网 友和 希望 政府 尽快 出 台 相 关 的 法 律 ,实行 互联 网 分 级 
管理 。 

面 对 网 络 中 出 现 的 一 些 低俗 现象 ,很 多 网 友和 希望 网 站 和 网 友 能 够 共同 担负 起 责任 。 网 
友 认 为 ,网 友 中 青少年 占 了 很 大 的 比例 ,网 络 的 和 谐 环境 关 系 到 中 国 青少年 的 心理 健康 , 关 
系 到 中 国 的 未 来 ,网 络 发 展 到 今天 网 站 文明 真 要 当成 一 件 大 事 , 它 不 仅 是 中 国 的 形象 ,也 是 
公民 思想 道德 建设 的 重要 内 容 , 是 让 中 国文 明 还 是 让 中 国 低俗 ,是 让 年 轻 人 都 健康 成 长 ,还 
是 让 低俗 下 流 的 东西 到 处 泛滥 ,这 是 每 个 公民 的 责任 ,也 是 网 络 的 责任 。 


1.3 网 页 设计 流程 


在 网 页 设计 的 认识 上 ,许多 人 似乎 仍 停留 在 网 页 制作 的 层面 上 ,认为 只 要 用 好 了 网 页 制 
作 软 件 , 就 能 搞 好 网 页 设计 。 事 实 上 ,网 页 设计 最 重要 的 ,并 非 在 软件 的 应 用 上 ,而 是 在 对 网 
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页 设计 的 理解 以 及 设计 制作 的 水 平 上 ,在 于 设计 者 自身 的 美感 以 及 对 页 面 的 把 握 。 

一 个 好 的 网 站 ,之 所 以 吸引 人 ,不 仅 是 因为 它 的 内 容 吸 引 人 , 还 有 重要 的 一 点 是 它 的 网 
站 风格 和 独特 的 创意 吸引 人 的 眼球 ,让 人 赏心悦目 、 流 连 忘 返 ,而 设计 者 就 要 知道 怎样 设计 
网 页 ,才能 使 设计 的 网 页 看 上 去 赏心悦目 、 创 意 独 特 。 


1.3.1 网 页 设计 的 流程 


1. 绘制 草图 

绘制 草图 的 目的 有 以 下 几 个 : 

(1) 确定 网 页 的 整体 风格 ,设计 整体 布局 结构 ,要 注意 图 片 的 应 用 及 版 面 规划 ,保持 网 
页 的 整体 一 致 性 。 要 保证 网 页 的 规范 性 ,同时 也 要 突出 它 的 特别 之 处 。 对 于 不 同性 质 的 行 
业 , 应 体现 出 不 同 的 主页 风格 ,就 像 穿着 打扮 ,应 依 不 同 的 性 别 以 及 年 龄 层次 而 异 一 样 。 例 
如 : 政府 部 门 的 主页 风格 一 般 应 比较 庄重 ,而 娱乐 行业 则 可 以 活泼 生动 一 些 ;文化 教育 部 门 
的 主页 风格 应 该 高 雅 大 方 ,而 商务 主页 则 可 以 贴近 民俗 ,使 大 众 喜 闻 乐 见 。 

(2) 版 面 编排 ,首先 涉及 的 是 页 面 的 版 面 编排 问题 。 主 页 作为 一 种 版 面 , 既 有 文字 ,又 
有 图 片 。 文 字 有 大 有 小 ,还 有 标题 和 正文 之 分 ;图 片 也 有 大 小 ,而 且 有 横 有 竖 。 图 片 和 文字 
都 需要 同时 展示 给 观众 , 若 简单 地 罗列 在 一 个 页 面 上 ,往往 会 搞 得 杂乱 无 章 。 因 此 必须 根据 
内 容 的 需要 ,将 这 些 图 片 和 文字 按照 一 定 的 次 序 进行 合理 的 编排 和 布局 ,使 它们 组 成 一 个 有 
机 的 整体 ,展现 给 广大 的 观众 。 

(3) 把 标志 Logo, 尽 可 能 地 放 在 每 个 页 面 上 最 突出 的 位 置 。 

(4) 文字 ,标题 ,图 片 等 的 组 合 , 会 在 页 面 上 形成 各 种 各 样 的 线条 和 形状 。 这 些 线条 与 
形状 的 组 合 , 构 成 了 主页 的 总 体 艺 术 效 果 。 必 须 注意 艺术 地 搭配 好 这 些 线 条 和 形状 ,才能 增 
强 页 面 的 艺术 魅力 。 

(5) 要 考虑 主要 目标 访问 群体 的 分 布地 域 . 年 龄 阶层 、 网 络 速度 .阅读 习惯 等 。 网 页 设 
计 的 美术 设计 要 求 , 网 页 美术 设计 一 般 要 与 企业 整体 形象 一 致 ,考虑 图 片 的 合并 ,减少 请 求 
量 , 以 及 样式 的 简洁 .便于 后 期 维护 。 

2. 颜色 搭配 

首先 ,要 确定 网 页 的 主 色 调 。 确 定 主 色调 时 ,最 好 根据 网 页 的 对 象 和 网 页 的 内 容 来 确 
定 。 例 如 政府 网 页 多 是 以 红色 和 黄色 为 主 , 游 戏 网 页 则 适合 使 用 黑色 或 者 暗 红 色 , 科 技 类 网 
页 一 般 选 用 深蓝 色 ,新 闻 类 网 页 可 以 选用 蓝 色 、 橘 黄 、 深 红色 ,等 等 。 如 果 是 创建 公司 网 站 ， 
就 要 考虑 公司 的 企业 文化 。 从 公司 的 标志 上 大 概 可 以 看 出 一 些 公司 的 基本 文化 。 例 如 , 某 
科技 公司 的 标识 由 红色 和 黑色 组 成 ,那么 在 设计 该 公司 网 站 时 就 应 该 考虑 以 红色 或 者 黑色 
为 主 色 调 。 

其 次 ,不 要 将 所 有 颜色 都 用 到 ,尽量 控制 在 三 至 五 种 色彩 以 内 。 背 景 和 前 文 的 对 比 尽 量 
要 大 (绝对 不 要 用 花纹 繁复 的 图 案 作 背景 ) ,以 便 突 出 主要 文字 内 容 。 

3. 制作 网 页 效果 图 

根据 草图 和 预 设 的 色调 ,使 用 软件 将 首页 网 页 效果 图 制作 出 来 。 再 进行 一 定 的 讨论 , 确 
定 网 页 的 风格 后 ,再 进行 其 他 网 页 的 制作 。 
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4. 把 效果 图 导出 
效果 图 制作 完毕 后 ,需要 把 效果 图 导出 ,导出 的 主要 目的 是 为 了 获得 页 面 布局 式 的 素材 
图 像 。 制 定 网 页 改版 计划 ,如 半年 到 一 年 时 间 进 行 较 大 规模 的 改版 等 。 


1.3.2 网 页 设计 的 注意 事项 


在 网 页 设计 的 过 程 中 ,应 注意 以 下 几 个 方面 : 

CD 页 面 内 容 要 新 颖 。 网 页 内 容 的 选择 要 不 落 俗套 ,要 重点 突出 一 个 “新 ” 字 。 

(2) 网 页 命名 要 简洁 。 由 于 一 个 网 站 不 可 能 就 是 由 一 个 网 页 组 成 , 它 有 许多 子 页 面 , 为 
了 能 使 这 些 页 面 有 效 地 被 连接 起 来 ,用 户 最 后 能 给 这 些 页 面 起 一 些 有 代表 性 的 而 且 简洁 易 
记 的 网 页 名 称 。 这 样 既 会 有 助 于 以 后 方便 管理 网 页 ,也 会 在 向 搜索 引擎 提交 网 页 时 更 容易 
被 别人 索引 到 。 

(3) 注意 视觉 效果 。 设 计 Web 页 面 时 ,一定 要 用 1024X768 的 分 辩 率 来 观察 。 许 多 浏 
览 器 使 用 1024X768 的 分 辩 率 ,尽管 在 1280X1024 高 分 辩 率 下 一 些 Web 页 面 看 上 去 很 具 
吸引 力 ,但 在 1024X768 的 模式 下 可 能 会 黯然 失色 。 作 一 点 小 小 的 努力 ,设计 一 个 在 不 同 分 
辨 率 下 都 能 正常 显示 的 网 页 。 

(4) 善 用 表格 来 布局 。 不 要 把 一 个 网 站 的 内 容 像 作 报告 似 的 一 二 三 四 地 罗列 出 来 ,要 
注意 多 用 表格 把 网 站 内 容 的 层次 性 和 空间 性 突出 显示 出 来 ,使 人 一 眼 就 能 看 出 你 的 网 站 重 
点 突出 ,结构 分 明 。 

(5) 要 为 图 片 附加 注释 文字 。 给 每 个 图 形 加 上 文字 的 说 明 , 在 出 现 之 前 就 可 以 看 到 相 
关内 容 , 尤 其 是 导航 按钮 和 大 图 片 更 应 如 此 。 这 样 一 来 ,用 户 在 访问 你 的 站 点 时 就 有 一 种 亲 
切 感觉 ,认为 你 心细 ,比较 善 解 人 意 , 时 时 刻 刻 为 他 人 着 想 ,相信 你 的 好 心 会 有 好 报 的 。 

(6) 考虑 浏览 器 的 兼容 性 。 当 然 现在 IE 所 占 的 市 场 份 额 越 来 越 大 ,但 是 我 们 仍然 需要 
考虑 到 Firefox、Netscape 以 及 Opera 这 些 浏 览 器 用 户 。 设 计 风 格 的 考虑 ,如 色彩 的 搭配 ,图 
形 、 线 条 的 使 用 等 。 要 时 刻 为 用 户 着 想 ,必须 最 少 在 几 种 不 同类 型 的 浏览 器 下 测试 网 站 ,看 
看 兼容 性 如 何 。 

(7) 不 宜 多 用 闪烁 文字 。 有 的 设计 者 想 通 过 闪烁 的 文字 来 引起 访问 者 的 注意 是 可 以 被 
人 理解 的 ,但 一 个 页 面 中 最 多 不 能 有 三 处 闪烁 文字 , 太 多 了 给 用 户 一 种 眼花 练 乱 的 感觉 , 反 
而 会 影响 用 户 去 访问 该 网 站 的 其 他 内 容 , 正 所 谓 “ 物 极 必 反 ”。 

(8) 每 个 页 面 都 要 有 导航 按钮 。 应 当 避 免 强迫 用 户 使 用 工具 栏 中 的 向 前 和 向 后 按钮 。 
你 的 设计 应 当 使 用 户 能 够 很 快 地 找到 他 们 所 要 的 东西 。 绝 大 多 数 好 的 站 点 在 每 一 页 相同 的 
位 置 上 都 有 相同 的 导航 条 ,使 浏览 者 能 够 从 每 一 页 上 访问 网 站 的 任何 部 分 。 

(9) 动画 不 适宜 过 多 。 大 家 都 喜欢 用 GIF 动画 来 装饰 网 页 , 它 的 确 很 吸引 人 ,但 我 们 在 
选择 时 ,是 否 能 确定 必须 用 GIF 动画 ,如 果 答 否 ,那么 就 选择 静止 的 图 片 ,因为 它 的 容量 要 
小 得 多 。 同 样 的 尺寸 的 Logo.GIF 动画 的 容量 有 5KB, 而 静止 Logo 的 只 有 3K. 

(10) 网 站 导航 要 清晰 。 所 有 的 超 链接 应 清晰 无 误 地 向 浏览 者 标识 出 来 .所 有 导航 性 质 
的 设置 , 像 图 像 按 钮 ,都 要 有 清晰 的 标识 .让 人 看 得 明白 , 千 万 别 光顾 视觉 效果 的 热闹 ,而 让 
浏览 者 不 知 东西 南北 。 链 接 文本 的 颜色 最 好 用 约定 俗 成 的 : 未 访问 的 , 蓝 色 ;点 击 过 的 , 紫 
色 或 栗色 。 总 之 ,文本 链接 一 定 要 和 页 面 的 其 他 文字 有 所 区 分 ,给 读者 清楚 的 导向 。 
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什么 是 网 页 设计 ? 它 有 什么 特点 ? 

网 页 的 技术 环境 指 的 是 什么 ? 

说 说 你 制作 网 页 常用 的 三 个 软件 ,它们 分 别 有 哪 些 作用 ? 
谈 谈 中 国 的 网 页 媒体 环境 ,有 哪些 需要 改善 的 ? 

详细 介绍 网 页 设计 的 流程 。 
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本 章 知 识 点 

。 网 页 版 面 设计 的 要 点 

。 网 页 版 面 编 排 原 则 

。 网 页 版 面 设计 的 常见 布局 方式 

。 网 页 版 面 设计 实例 分 析 

本 章 学 习 目 标 

。 理解 网 页 设计 中 的 构图 旋律 

。 理解 网 页 设计 中 的 形式 法 则 

° 掌握 根据 网 站 的 主题 .素材 类 型 .风格 ,确定 网 页 的 布局 方式 
。 理解 图 文 混 排 的 基本 要 求 

。 掌握 在 网 页 中 用 布局 表格 来 布局 页 面 的 方法 


在 网 页 设计 中 根据 特定 的 主题 和 内 容 , 把 文字 、 图 形 图 像 . 动 画 、 视 频 、 色 彩 等 信息 传达 
要 素 界定 在 一 个 范围 内 ,有 机 的 、 秩 序 的 ,艺术 性 的 组 织 在 一 起 ,形成 美观 的 页 面 并 不 是 容易 
的 事 。 由 于 多 数 专业 的 计算 机 技术 人 员 缺 乏 艺术 设计 的 能 力 ,致使 许多 网 页 一 直 都 是 按 固 
定 的 格式 来 完成 ,只 是 在 文字 内 容 上 有 所 变化 ,所 以 使 很 多 网 页 看 起 来 千篇一律 ,缺乏 个 性 。 
为 了 证 网 页 更 具 艺 术 魅 力 ,必须 提高 制作 人 员 的 艺术 素养 ,将 艺术 与 技术 有 机 地 结合 起 来 ， 
使 网 络 呈 现 更 绚丽 的 色彩 。 网 页 的 版 面 设计 应 从 造型 .视觉 心理 及 版 式 构 成 几 方面 人 手 , 本 
章 将 主要 进行 这 方面 知识 的 学 习 。 


2.1 网 站 的 版 面 设计 


设计 网 站 首页 的 第 一 步 是 设计 版 面 布局 。 就 像 传 统 的 报刊 杂志 编辑 一 样 , 可 以 将 网 页 
看 做 一 张 报纸 .一 本 杂志 来 进行 排版 布局 。 虽 然 动态 网 页 技术 的 发 展 使 得 人 们 开始 趋向 于 
学 习 场 景 编剧 ,但 是 固定 的 网 页 版 面 设计 基础 依然 是 必须 学 习 和 掌握 的 。 
2.1.1 版 面 编排 原则 


在 进行 网 站 的 版 面 编排 的 时 候 , 应 遵循 一 些 基 本 的 原则 : 
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CD 突出 中 心 , 理 清 主 次 。 
(2) 搭配 合理 ,大 小 呼应 。 
(3) 图 文 并 茂 ,相得益彰 。 


2.1.2 选择 页 面 的 大 小 


在 设计 网 页 的 版 面 时 ,首先 要 明确 网 页 的 尺寸 。 版 面 指 的 是 浏览 器 看 到 的 完整 的 一 个 
页 面 (可 以 包含 框架 和 层 )。 因 为 每 个 客户 的 显示 器 分 辨 率 不 同 ,所 以 同一 个 页 面 的 大 小 可 
能 出 现 640X480 像素 、800X600 像素 、1024X768 像素 等 不 同 尺 寸 。 

网 页 界面 设计 不 同 于 报纸 、 杂 志 等 版 面 的 设计 , 它 是 动态 的 、 变 化 的 版 面 。 多 数 人 的 显 
示 器 分 辩 率 为 800X 600 像素 或 1024X768 像素 ,设计 版 面 时 就 应 以 800 x 600 像素 为 标准 ， 
除去 滚动 条 所 占 的 20 像素 ,安全 宽度 应 控制 在 780 像素 以 内 ,这 样 才能 浏览 到 全 部 的 横向 
页 面 内 容 ,垂直 方向 上 ,页 面 是 可 滚动 的 ,版 面 的 长 度 一 般 不 作 限 制 ,但 是 一 些 较 正规 的 网 站 
要 求 滚动 不 超过 З 屏 , 针 对 这 样 动态 的 版 面 空间 ,设计 起 来 就 要 存在 较 大 的 难度 。 为 此 ,网 
页 设计 师 应 采取 一 些 相应 的 对 策 ; 

CD 运用 自 适 应 宽度 技术 。 即 在 版 面 宽度 超出 800 像素 时 ,页面 内 容 自 动 伸缩 ,充满 整 
个 版 面 ,这 样 的 技术 就 要 求 版 面 设计 也 要 具有 适应 性 ,如 图 2-1 和 图 2-2 所 示 。 
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(2) 运用 背景 来 适应 不 同 分 辩 率 的 版 面 效 果 。1024X768 像素 环境 下 运用 背景 填充 空 
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СЗ) 使 版 面 保持 固定 尺寸 ,禁止 滚动 出 现 ,增强 对 版 面 的 控制 ,这 样 的 方案 非常 适用 于 
设计 性 较 强 的 图 形 界 面 。 
明确 了 网 页 的 尺寸 之 后 ,下 一 步 就 是 网 页 布局 。 
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当 点 击 鼠 标 ,在 网 络 中 漫游 时 ,一 个 个 精彩 的 网 页 会 呈现 在 面前 。 试 问 网 页 的 精彩 因素 
有 哪些 呢 ? 色彩 的 搭配 文字 的 变化 .图 片 的 处 理 等 ,这 些 当 然 是 不 可 忽略 的 因素 ,除了 这 


些 ,还 有 一 个 重要 的 因素 一 一 网 页 布局 ,“ 网 页 布局 "顾名思义 是 指 对 网 页 元 素 的 整体 安排 。 


2.2.1 常见 的 网 页 布局 类 型 


1. 网 页 布局 的 常见 类 型 及 特点 

(1)“ 国 ” 字 型 

特点 : 充分 利用 版 面 ,信息 量 大 。 

(2) 拐角 型 

特点 : 简单 明了 ,容易 把 握 。 

(3) 标题 正文 型 

特点 : 简洁 。 

(4) 封面 型 

特点 : 生动 活泼 ,简单 明了 。 

2. 典型 的 版 面 设计 风格 示例 

(1) 版 面 典 型 风格 一 一 对 称 型 ,如 图 2-5 所 示 。 
(2) 版 面 典型 风格 一 一 偏 置 型 ,如 图 2-6 所 示 。 
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图 2-6 


(3) 版 面 典 型 风格 一 一 标题 型 ,如 图 2-7 所 示 。 
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3. 网 页 版 式 构成 实例 分 析 

在 网 页 设计 中 较 常 见 的 网 页 版 式 构成 类 型 主要 有 水 平分 割 式 、 垂 直 分 割 式 \ 水 平 与 垂直 
分 割 交叉 式 、 斜 线 式 、S 曲线 式 、 重 复式 等 。 

水 平分 割 的 页 面具 有 较 强 的 视觉 稳定 性 ,给 人 平静 、 安 定 的 感觉 , 观 者 的 视线 是 水 平流 
动 的 ,一 般 是 从 左 至 右 , 遵 从 人 的 视觉 习惯 。 

垂直 分 割 强调 的 是 垂 线 的 视觉 冲击 力 ,体现 坚强 、 理 智 与 秩序 的 感觉 ,如 图 2-8 所 示 。 


ПН a шей а ХИТИ + Ra 


图 2-8 
一 般 情 况 下 直 的 线条 给 人 感觉 流畅 .挺拔 .规矩 .整齐 .所 以 ,直线 和 方正 的 面 形 在 页 面 


上 的 重复 组 合 会 给 人 秩序 井然 的 视觉 效果 。 多 应 用 于 比较 庄重 .严肃 的 网 页 题材 。 如 
图 2-9 所 示 为 中 华人 民 共 和 国人 民政 府 网 站 。 
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曲线 、 弧 线 、 曲 线形 状 的 应 用 能 够 产生 运动 .韵律 的 动感 ,形成 富有 活力 的 视觉 效果 。 多 
应 用 于 青春 、 活 泼 、 运 动 ` 娱 乐 类 型 的 网 页 题材 ,如 图 2-10 所 示 。 
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图 2-10 


曲 形 与 直 形 的 综合 应 用 是 将 以 上 两 种 线条 和 形状 结合 起 来 运用 ,不 仅 能 够 丰富 网 页 的 
表现 力 ,还 能 使 网 页 更 富 于 变化 ,艺术 效果 更 丰富 多 彩 ,如 图 2-11 所 示 。 这 种 网 页 比较 常 
见 , 且 用 途 广泛 , 相 适 应 主题 也 较 多 。 不 过 ,如 果 页 面 的 编排 处 理 不 当 , 会 给 和 人 留 下 凌乱 无 
章法 的 感觉 。 
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图 2-11 
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合理 安排 版 面 ,保证 画面 松紧 适宜 。 有 的 网 页 内 容 较 多 ,标题 较 长 ,这 种 类 型 的 内 容 应 
尽量 避免 编排 在 一 起 ,否则 会 给 人 拥挤 的 感觉 ,应 合理 保持 画面 的 松紧 关系 ,同样 , 较 短 的 文 
章 ,也 不 能 编排 在 一 起 ,这 样 会 使 人 感觉 零散 、 不 整齐 。 图 片 的 编排 也 应 遵循 此 原则 ,要 互相 
穿插 ,形成 文字 、 图 片 等 版 面 间 错落 有 致 的 效果 。 


2.2.2 网 页 排版 布局 的 一 般 步骤 


1. 构思 

新 建 的 网 页 就 像 一 张 白 纸 , 没 有 任何 表格 框架 和 约定 俗 成 的 东西 ,可 以 尽 可 能 地 发 挥 
想象 力 ,将 想象 到 的 “景象 " 画 上 去 。 这 属于 创造 阶段 ,不 讲究 细腻 工整 ,不 必 考 虑 细节 功能 ， 
只 以 简练 的 线条 勾画 出 创意 的 轮廓 即 可 。 根 据 网 站 内 容 的 整体 风格 ,应 尽 可 能 多 画 几 张 ,最 
后 选 定 一 个 满意 的 创作 ,完成 版 面 布局 设计 。 

2. 粗略 布局 

在 草案 的 基础 上 ,将 确定 需要 放置 的 功能 板块 安排 到 页 面 上 。 这 里 必须 遵循 突出 重点 ， 
平衡 协调 的 原则 ,将 网 站 标识 、 主 菜单 等 最 重要 的 模块 放 在 最 显眼 .最 突出 的 位 置 ,然后 再 考 
虑 次 要 模块 的 排放 。 

这 一 步 就 要 把 一 些 主要 的 内 容 放 到 网 页 中 ,例如 ,网 站 的 标志 ,广告 条 、 菜 单 、 导 航 条 、 计 

3. 细 化 

在 将 各 主要 元 素 确定 好 之 后 ,下 面 就 可 以 考虑 文字 、 图 像 .表格 等 页 面 元 素 的 排版 布局 
了 。 在 这 一 步 , 设 计 者 可 以 利用 网 页 编辑 工具 把 草案 做 成 一 个 简略 的 网 页 ,当然 ,对 每 一 种 
元 素 所 占 的 比例 也 要 有 一 个 详细 的 数字 ,以 便 以 后 修改 。 

经 粗略 布局 精细 化 、 具 体 化 。 在 布局 过 程 中 ,我 们 可 以 遵循 的 原则 有 : 

CD 正常 平衡 : 亦 称 “ 匀 称 ”。 多 指 左右 、 上 下 对 照 形式 ,主要 强调 秩序 ,能 达到 安定 诚 
实 、 信 赖 的 效果 。 

(2) 异常 平衡 : 即 非 对 照 形式 ,此 种 布局 能 达到 强调 性 ,不 安 性 ,高 注目 性 的 效果 。 

(3) 对 比 : 所 谓 对 比 , 不 仅 利用 色彩 、 色 调 等 技巧 来 作 表现 ,在 内 容 上 也 可 涉及 古 与 今 、 
新 与 旧 、 贫 与 富 等 对 比 。 

(4) 凝视 : 所 谓 凝 视 是 利用 页 面 中 人 物 视线 .使 浏览 者 仿照 跟随 的 心理 ,以 达到 注视 页 
面 的 效果 ,一般 多 用 明星 凝视 状 。 

(5) 空白 : 空白 有 两 种 作用 ,一 方面 表现 网 站 突出 卓越 感 , 另 一 方面 也 表示 网 页 品味 的 
优越 感 ,这 表现 方法 对 体现 网 页 的 格调 十 分 有 效 。 

(6) 图 解说 明 : 此 法 对 不 能 用 语言 说 服 ,或 用 语言 无 法 表达 的 情感 特别 有 效 。 图 解说 
的 内 容 , 可 以 传达 给 浏览 者 更 多 的 心理 因素 。 

以 上 的 设计 原则 ,如 果 能 够 领会 并 活用 到 页 面 布局 里 ,效果 就 大 不 一 样 了 。 比 如 : 页 面 
的 白色 背景 太 虚 , 则 可 以 加 些 色 块 ;版面 零散 ,可 以 用 线条 和 符号 串联 ;左面 文字 过 多 ,右面 
则 可 以 插 一 张 图 片 保 持平 衡 等 。 


iz 
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2.3 用 布局 表格 来 布局 页 面 


使 用 Dreamweaver 打开 示例 网 页 ,以 标准 模式 显示 网 页 的 布局 。 

目前 因特网 上 大 多 数 网 页 都 是 用 表格 布局 的 。 但 是 ,使 用 表格 进行 布局 不 太 方 便 , 因 为 
最 初创 建 表格 是 为 了 将 数据 排列 整齐 .而 不 是 用 于 对 网 页 进行 布局 。 

为 了 简化 使 用 表格 进行 页 面 布局 的 过 程 , DW 提供 了 “布局 "模式 。 在 “布局 "模式 中 ， 
绘制 布局 表格 或 布局 单元 格 就 如 同 在 Word 中 画 和 矩形 框 一 样 容易 。 


2.4 图 文 编排 


在 完成 布局 之 后 ,就 可 以 输入 文字 ,插入 图 片 ,并且 对 文本 、 图 片 进行 必要 的 设置 ,再 设 
丫 背 景色 或 背景 图 片 ,使 得 整个 网 页 浑然 一 体 。 


2.5 主体 版 面 设计 


网 页 的 主体 版 面 是 指 去 除 页 面 头 部 和 页 脚 部 分 用 来 放置 页 面 主要 内 容 的 页 面 区 域 。 内 
容 区 域 一 般 包 括 页 面 的 内 容 链 接 、 文 章 列表 和 文章 信息 等 ,如 图 2-12 所 示 。 主 体 版 面 的 设 
计 包 括 主体 版 面 布 局 的 确定 \ 版 面 颜色 和 字体 的 选择 ,主题 版 面 各 模块 的 添加 、 图 片 和 链接 
的 设置 等 。 
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2.5.1 主体 版 面 风格 的 确定 


主体 版 面 的 风格 是 由 页 面 的 整体 风格 、 页 面 的 尺寸 和 页 面 的 版 面 布局 共同 决定 的 。 页 
面 的 整体 风格 决定 了 主体 版 面 的 颜色 搭配 .字体 使 用 和 图 片 排列 ;页 面 的 尺寸 决定 了 主体 版 
面 的 宽度 ;页 面 的 版 面 布局 决定 了 主体 版 面 内 容 板块 的 排列 。 同 时 ,在 进行 主题 版 面 设计 时 
必须 遵循 一 定 的 规则 。 本 节 将 分 别 介绍 这 些 内 容 。 


2.5.2 主体 版 面 颜色 搭配 


在 网 页 页 面 中 ,使 用 不 同 的 颜色 可 以 让 人 有 不 同 的 感受 。 在 主体 版 面 中 ,使 用 的 颜色 一 
般 是 页 面 的 主 颜色 。 在 色彩 搭配 上 , 既 要 与 页 面 头 部 风格 相 融 合 ,又 要 与 页 面 表现 的 内 容 相 
关联 。 一 般 的 主体 版 面 颜色 数量 应 该 尽量 控制 在 3 种 颜色 以 内 ,前 景色 和 背景 色 的 对 比 应 
该 明显 ,背景 色 要 求 邓 和 一 些 , 前 景色 应 该 选择 深 一 点 的 颜色 。 下 面 介绍 一 些 互联 网 上 比较 
常见 的 色彩 搭配 技巧 。 

CD 以 一 种 色彩 为 主 的 颜色 搭配 ,如 图 2-13 所 示 。 


Home | Forum Bands News Releases Tourdates | FAQ Links 


www.triphop-music.com. 
unknown bands tour dates album releases 


New band added - Tizre 


Read the full description 


TripHop-Music.com needs you! 


Suggest new bands 


图 2-13 


(2) 两 种 色彩 搭配 ,如 图 2-14 所 示 。 
(3) 以 一 个 色 系 作 为 主 颜 色 搭配 .如 图 2-15 所 示 。 
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图 2-15 
(4) 用 黑色 配 一 种 彩色 ,如 图 2-16 Bron , 
2.5.3 主体 版 面 字体 选择 
网 页 中 字体 的 选择 主要 包括 字号 .字体 和 行距 。 


1. 字号 
字体 的 大 小 称 为 字号 。 
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Moving Through the 


2. 字体 

网 页 制作 中 比较 常用 的 中 文字 体 是 宋体 和 黑体 。 
3. 行距 

上 一 行 字 顶 端 到 其 下 一 行 字 顶 端的 距离 称 为 行距 。 


2.5.4 主题 版 面 的 大 小 控制 


由 于 用 户 使 用 的 浏览 器 屏幕 分 辩 率 各 不 相同 ,因此 主体 版 面 的 大 小 也 有 不 同 的 规格 , 比 
较 常见 的 主题 版 面 大 小 是 1024X768 像素 和 800 x 600 像素 ,如 图 2-17 所 示 。 
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贯彻 落实 科学 发 展现 ， 全 面 推动 学 校 各 项 工作 , 
以 优异 成 绩 迎 接 中 国共 产 党 广州 市 广播 电视 大 学 第 四 次 党 员 大 会 胜利 召开 ! 
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图 2-17 ( 续 ) 


2.5.5 主体 版 面 的 布局 


dE 12.2 节 中 介绍 了 7 种 常见 的 页 面 综 合 布局 ,每 一 种 页 面 综 合 布局 决定 了 其 对 应 
面 主体 版 面 的 布局 风格 。 下 面 是 比较 常见 的 主体 版 面 的 布局 方式 。 
一 栏 式 布局 
网 页 主体 版 面 采用 一 栏 式 布局 的 设计 ,如 图 2-18 所 示 。 
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dox ”网 页 的 版 面 设计 
2. 两 栏 式 布局 
网 页 主体 版 面 采 用 分 两 栏 显示 的 设计 方式 ,如 图 2-19 所 示 。 
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3. 三 栏 式 布局 
网 页 主体 版 面 采用 三 栏 式 布局 的 设计 ,如 图 2-20 所 示 。 
4. 多 栏 式 布局 


网 页 主体 版 面 采用 多 栏 式 布局 的 设计 ,如 图 2-21 所 示 。 
2.5.6 主体 版 面 设计 遵循 的 原理 


主体 版 面 的 设计 是 一 项 技巧 性 比较 强 的 排版 技术 。 作 为 一 项 排版 技术 ,其 设计 就 应 遵 
循 排版 技术 的 原理 ,下 面 是 进行 主体 版 面 设计 时 应 遵循 的 原理 。 

平衡 : 就 是 指 重量 的 平均 分 配 。 

焦点 和 主 次 : 人 们 浏览 一 个 页 面 内 容 的 时 候 , 首 先 看 到 的 地 方 称 为 焦点 。 

韵律 设计 : 音乐 的 节拍 有 韵律 ,在 平面 设计 中 也 有 韵律 。 


网 页 设计 与 网 站 规划 


Departaent of Energy - Homepage — 


ӨӨ- іе: 


findowz Internet Explorer 


Өөх [e 


XH euo 
3» е WEü—mpesm 


с river TER. 


Сосн ишш 


ABOUT DOE | ORGANIZATION | NEWS | CONTACT US 
V.S. DEPARTMENT OF. 


ЕМЕКО ! 


ошск CLICKS. IN THE NEWS 


кок CONSUMERS. Geex-Up Halloween Special 
ток FDUCATORS 

FOR STUDENTS AND KIDS 

FOR EMPLOYEES. 


STAY CONNECTED 


Ki 


d f| 


These links are subject to the 


DUESE TET ESSET 


J- |t 
RAO fo PAZO IAD Wb 
ПЕ 


3 四 
m 


Welcome to TimesPeopie 


Thousareis 一 Ba 


Migtle to receve a 
Tebote for porchaung, 
Shew cneroy eise 
aplance tà replace 
Yet used scplance. 


CETT 


swam 


€be New 1J 


Sunday, October. 


ork Cimes 


Login | Register Now 


GET OUR GUARANTEED 
LOWEST FARE 


Get Home Delivery for as lowas $3.10 per week - Subseribe Today >> 


| OUR DEST ran 


m 
preblem of this 


"nate From 
О.Р. Gains 


NE бетига) 

With Republicans in a dark flow of дой: 
position to capture 
se, President Obama 


aign swing to rally 


fem an, | — tàn Bed 一 OnNION - 
c Democrats — Dressing н = 
ime | Fight to Keep I political тн 


e filed the 
real 


Obamaa 


civa obama 
Politicians Are s may be financing Qaeda pr 
Fighting Mad, at the security offcials ay. Above Ара hab was Оі А педа би 
News Media eundi pid in May mrsnersspay 
r {ас Aum т 


图 2-21 


统一 和 变化 : 统一 不 是 让 许多 形态 


理性 和 规律 性 。 


素 单一 化 和 简单 化 
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:而 是 使 多 种 变化 因素 具有 条 
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2.6 主体 元 素 的 确定 


主体 版 面 的 风格 确定 之 后 就 需要 将 主体 版 面 在 页 面 中 进行 体现 ,2. 5. 5 节 介 绍 的 几 种 
主体 版 面 布局 中 ,两 栏 式 布局 是 初学 者 最 易学 会 的 ,而 且 在 网 页 中 应 用 也 最 多 ,下 面 一 起 来 
学 习 两 栏 式 主体 版 面 的 制作 。 


2.6.1 两 栏 布局 主体 版 面 的 左 栏 制作 


所 谓 两 栏 就 是 将 主体 版 面 分 两 列 进行 显示 ,两 栏 式 布局 的 设计 思想 是 将 主体 版 面 分 别 
放 在 左右 两 个 单元 格 中 ,然后 再 在 单元 格 中 添加 主体 元 素 。 其 具体 的 制作 步骤 如 下 : 

(1) 运行 Dreamweaver 网 页 设计 软件 ,在 网 页 设计 界面 插入 表格 ,其 对 话 框 如 图 2-22(a) 
Bim. 
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(2) 调整 表格 左右 单元 格 大 小 并 输入 左边 栏目 列表 文字 ,制作 内 容 如 图 2-22(b) 所 示 。 


2.6.2 两 栏 布 局 主体 版 面 的 右 栏 制作 


该 两 栏 式 页 面 主题 布局 的 右 栏 是 页 面 主体 版 面 的 真正 主体 ,主要 放置 页 面 的 主要 内 容 。 

其 具体 制作 步骤 如 下 : 

(1) 运行 Dreamweaver 网 页 设计 软件 ,在 网 页 右 栏 插入 图 片 并 输入 文字 ,如 图 2-23 
所 示 。 
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(2) 根据 页 面 宽度 重复 插入 图 片 和 相应 文字 ,完成 后 在 浏览 器 上 运行 显示 如 图 2-24 所 
示 效 果 。 


2.6.3 样式 调整 及 修改 


任何 的 主体 版 面 都 要 经 过 CSS 样式 的 调整 、 控 制 和 修饰 美化 ,才能 与 页 面 的 整体 风格 
相 搭 配 ,才能 使 网 页 更 加 美观 。 下 面 一 起 来 学 习 如 何 对 两 栏 布局 的 主体 版 面 进行 CSS 样式 
的 调整 。 

两 栏 布局 主体 版 面 的 CSS 调整 与 修改 

在 2.6.2 节 中 ,了 解 了 页 面 主体 版 面 不 美观 的 原因 是 因为 没有 对 其 进行 CSS 样式 的 调 
整 与 控制 ,主体 版 面 CSS 样式 的 调整 与 修改 的 具体 步骤 如 下 : 

(1) 在 Dreamweaver 中 ,设置 此 标签 的 样式 ,设置 参数 如 图 2-25(a) 所 示 。 

(2) 设置 光 经 过 链接 时 的 样式 ,设置 参数 如 图 2-25Cb) 所 示 。 

两 栏 布局 主体 版 面 可 通过 CSS 优化 的 方式 使 网 页 显示 效果 更 舒服 ,最 终 效果 如 图 2-26 
所 示 。 
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2.7 ”网 页 与 平面 构成 、 色彩、 版面 设计 的 关系 


2.7.1 网 页 的 平面 构成 设计 


怎样 把 众多 的 内 容 既 美观 又 合理 有 效 地 摆 放 在 同一 个 平面 内 ,对 于 设计 者 来 说 是 需要 
动 一 番 脑 筋 的 。 一 般 来 说 ,网 页 的 平面 构成 设计 中 要 注意 以 下 3 个 方面 : 

1. 布局 要 新 颖 

所 谓 布 局 就 是 指 界面 的 平面 分 布 安排 ,即将 繁杂 的 内 容 进行 条 理化 ,秩序 化 的 编辑 处 
理 ,将 其 组 织 成 一 个 结构 合理 ,版 块 搭配 适度 的 页 面 。 其 中 ,新颖 的 形式 感 非常 重要 ,要 根据 
不 同 内 容 的 特点 来 决定 版 面 的 最 终 形式 感 。 虽 不 能 说 “ 牵 一 发 而 动 全 身 ”, 但 “ 减 之 一 分 则 
少 , 增 之 一 分 则 多 ”的 版 面 处 理 是 应 该 大 力 提倡 的 。 

2. 对 比 要 强烈 

加 强 页 面 的 对 比 因素 ,是 吸引 人 们 关注 的 有 效 手段 。 页 面 上 的 各 种 文字 、 图 片 在 设计 时 
就 应 构思 好 相互 之 间 的 对 比 关系 ,要 大 小 参差 变化 、 疏 密 衬 托 有 臻 .轻重 感觉 均衡 .明暗 对 比 
适度 。 设 计 上 的 别具一格 ,对 页 面 设 计 的 成 功 与 否 起 着 至 关 重 要 的 作用 。 

3. 既 变 化 又 统一 

对 版 块 外 形 特征 的 选择 应 遵守 变化 统一 的 设计 原则 , 既 不 刻意 追求 外 形 的 变化 ,使 版 块 
分 割 烦琐 凌乱 ,又 不 简单 划分 版 面 界限 ,使 得 页 面 显 得 单一 刻板 。 所 谓 ”* 万 变 不 离 其 宗 ”， 
复 的 比较 ,精心 的 安排 .整体 的 权重 是 设计 好 网 页 的 基本 要 求 , 同 时 也 是 网 页 设计 的 最 终 
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选择 。 
2.7.2 色彩 设计 


从 色彩 学 的 角度 来 审视 网 页 设计 ,色彩 运用 得 好 坏 直 接 影响 到 网 页 的 整体 效果 。 在 庞 
杂 的 网 页 界面 中 ,色彩 运用 得 越 简洁 、 完 整 ,对 人 们 的 吸引 力 就 越 强 。 成 功 的 网 页 设计 ,都 遵 
循 了 色彩 运用 的 规律 ,其 优美 的 色彩 往往 是 吸引 人 们 关注 的 重要 因素 之 一 。 

1. 对 比 与 和 谐 

网 页 版 面 中 的 色彩 ,首先 要 强调 对 比 。 色 彩 对 比如 果 不 到 位 ,整个 页 面 就 会 显得 灰暗 ， 
没有 生气 。 在 对 比 的 同时 还 要 注意 和 谐 , 不 和 谐 的 色彩 对 比 是 对 色彩 运用 不 成 熟 的 变现 。 
色彩 对 比 与 和 谐 的 方法 很 多 ,例如 : 色彩 三 要 素 的 对 比 、 类 似 调和 构成 .色彩 的 调和 与 面积 
形状 的 关系 、 色 彩 的 调和 与 视觉 生理 平衡 等 。 

2. 色彩 的 肌理 

肌理 主要 指 的 是 物体 表面 的 结构 特征 ,色彩 肌理 主要 是 观 者 通过 观察 来 “触摸 ”物体 表 
面色 彩 的 一 种 色觉 感受 。 由 于 材料 表面 的 组 织 结构 不 同 , 吸 收 与 反射 光 的 能 力也 不 同 , 因 此 
材料 能 影响 物体 表面 的 色彩 。 一 般 来 说 ,反光 能 力 强 的 物体 表面 都 很 光滑 ,反映 的 色彩 不 够 
稳定 ,但 明度 有 提高 ;粗糙 的 表面 反光 能 力 很 弱 , 色 彩 较 稳定 ,如 果 表 面 粗 糙 到 一 定 程度 , 明 
度 和 纯度 会 有 一 定 的 降低 。 因 此 ,同一 种 颜色 用 在 不 同 的 材料 上 会 产生 不 同 的 颜色 效果 ,这 
就 是 肌理 对 色彩 的 影响 。 

同时 ,无 彩色 与 有 彩色 的 相互 作用 、 绘 画 色彩 与 设计 色彩 的 关系 也 是 应 该 注意 的 。 另 
外 ,在 网 页 设计 时 既 要 考虑 到 页 面 整体 风格 的 协调 统一 ,还 要 兼顾 将 要 添加 到 网 页 中 的 内 容 
形式 ,而 且 网 页 中 的 内 容 应 当 清 晰 且 适 宜 浏 览 , 所 以 不 要 使 用 太 炊 眼 的 颜色 或 太 膀胱 的 效 
果 , 除 非 有 特殊 的 需要 。 


2.7.3 美术 设计 


除了 网 页 内 容 规划 与 信息 的 价值 外 ,网 站 的 视觉 设计 也 是 非常 重要 的 。 因 为 通过 
专业 的 美术 设计 ,可 以 让 网 站 在 体现 高 素质 的 形象 外 ,还 可 以 通过 富有 吸引 力 的 视觉 
环境 给 访问 者 提供 高 质量 的 信息 。 美 术 设计 除了 需要 设计 师 的 创意 外 ,还 需要 注意 以 
下 几 点 : 

(1) 网 站 整体 设计 简洁 、 美 观 ,做 到 图 文 相 辅 相 成 , 绝 不 能 喧 宾 夺 主 。 

(2) 图 像 制作 精致 ,能 够 提高 网 页 的 美观 程度 。 

(3) 在 图 像 制作 精致 的 同时 ,还 必须 控制 好 文件 尺寸 与 大 小 ,方便 网 络 传 输 与 用 户 
浏览 。 


2.7.4 网 页 排版 


网 页 排版 是 网 页 制作 不 可 缺少 的 操作 ,因为 对 于 网 页 来 说 ,布局 可 以 说 是 它 的 灵魂 ,如 
果 没 有 页 面 的 合理 布局 ,就 无 法 将 创作 表现 在 网 页 上 , 即 无 法 体现 网 页 元 素 的 整体 形式 
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现在 , 绝 大 多 数 网 站 都 包含 文字 、 图 片 ,符号 ,动画 、 按 钮 等 内 容 , 其 中 又 以 文字 和 图 像 所 
占 的 比重 为 最 大 ,这 是 因为 网 站 的 主要 目的 是 信息 的 传递 ,文字 是 传递 信息 最 有 效 的 方式 ， 
而 图 像 则 是 辅助 文字 说 明 的 最 佳 拍档 。 因 此 ,文字 和 图 像 与 其 他 页 面 元 素 的 排版 ,是 整合 整 
个 网 页 的 重要 手段 ,也 是 信息 传递 的 重要 体现 。 


2.8 网 页 设计 与 传统 版 面 设计 的 比较 


传统 的 版 面 设 计 并 不 适 于 网 络 ,因为 传统 的 版 面 布局 ,主要 应 用 于 印刷 .平面 广告 等 , 几 
乎 想 要 什么 样 的 平面 效果 都 能 很 好 地 达到 ,但 在 网 络 上 设计 就 很 困难 ,最 主要 的 一 点 是 因为 
网 络 速度 慢 是 设计 的 瓶颈 ,必须 兼顾 浏览 速度 ,在 此 基础 上 ,尽管 很 多 的 效果 都 能 通过 一 些 
JavaScript 或 是 高 级 的 CSS 技巧 来 实现 ,来 保证 网 页 下 载 速度 。 网 站 是 多 媒体 的 结合 物 ,在 
网 站 上 可 以 有 个 性 张扬 的 风格 ,展示 自己 的 风格 的 一 面 ,发 挥 空间 很 大 ,可 以 有 视频 ,可 以 有 
Flash 动画 等 绚丽 的 效果 ,这 些 在 报纸 杂志 是 体现 不 出 来 的 。 平 面 媒体 一 旦 被 印刷 出 来 就 
不 会 有 所 改动 了 ,而 网 站 却 可 以 更 新 、 维 护 、 重 新 装修 。 而 且 从 展示 角度 来 看 ,网 站 是 全 方位 
设计 ,可 以 将 企业 大 部 分 的 信息 展示 出 来 ,让 客户 很 好 地 了 人 解 企业 。 

而 且 , 网 络 上 的 很 多 排版 布局 区 别 于 传统 的 印刷 打印 ,毕竟 这 是 两 个 相隔 时 间 很 长 的 事 
物 。 但 是 ,在 最 近 的 几 年 中 ,我 们 发 现 越 来 越 多 的 报纸 开始 使 用 网 页 设计 布局 排版 ,比如 大 
量 的 页 面 留 白 和 基于 网 络 的 设计 。 同 时 ,也 可 以 借鉴 传统 报纸 的 排版 布局 来 获取 新 鲜 的 网 
页 创意 设计 灵感 。 互 相 补 充 , 达 到 理想 的 设计 风格 。 


2.9 典型 网 站 的 版 面 设 计 


下 面 简要 介绍 几 种 典型 的 网 站 的 实例 ,以 便 读 者 了 解 不 同类 型 的 网 站 的 设计 风格 与 


2.9.1 商业 站 点 


一 般 的 ,商业 站 点 的 主要 观众 是 潜在 的 和 正常 的 客户 组 织 ;第 二 种 观众 包括 潜在 的 
和 正常 的 投资 者 、 潜 在 的 雇员 ; 令 人 感 兴趣 的 第 三 种 观众 ,是 新 闻 媒 体 或 竞争 者 , 如 
图 2-27 Bro 。 

任何 商业 站 点 的 最 主要 的 目的 是 .以 公司 直接 或 间接 受益 的 方式 服务 于 用 户 。 

商业 站 点 有 以 下 共同 特点 : 

。 基 本 信息 的 发 布 

。 支 持 与 帮助 

。 投资 机 会 
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2.9.2 信息 站 点 


政府 教育. 新闻、 无 利润 的 组 织 .宗教 组 织 ,或 变化 多 样 的 社会 站 点 经 常 被 认为 是 信息 
站 点 ,如 图 2-28 所 示 的 新 浪 网 首页 。 

信息 站 点 的 特点 如 下 : 

。 信息 站 点 的 访问 者 一 般 都 是 对 站 点 提供 的 信息 有 兴趣 或 需要 的 。 

。 信 息 站 点 的 建立 满足 某 些 设计 条 件 , 但 不 需要 考虑 财政 方面 的 因素 。 

。 信息 站 点 提供 信息 的 目的 变化 很 大 。 


2.9.3 娱乐 站 点 

娱乐 站 点 的 意图 主要 是 使 参观 者 快乐 。 在 某 种 程度 上 说 ,他 们 是 出 售 娱乐 节目 。 设 计 
娱乐 站 点 时 要 通过 打破 常规 来 取得 成 功 。 就 娱乐 站 点 来 说 ,目的 是 出 售 体验 本 身 , 如 
图 2-29 的 联众 世界 的 主页 。 
2.9.4 门户 站 点 


门户 站 点 是 用 户 在 网 上 冲浪 的 起 始 站 点 ,该 站 点 帮助 人 们 查找 信息 。 
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图 2-29 


门户 站 点 经 常 试 图 提供 尽 可 能 多 的 信息 ,为 用 户 尽 可 能 多 地 提供 服务 ,鼓励 他 们 留 在 该 
站 点 继续 浏览 。 

门户 站 点 也 包括 搜索 引擎 或 站 点 目录 ,这 些 是 门户 站 点 发 展 壮 大 的 关键 ,如 图 2-30 所 
示 的 雅虎 中 文 网 。 
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习题 2 


2-1 版 面 布局 的 技巧 是 什么 ? 
2-2 如 何 设计 首页 的 版 面 ? 
2-3 ”界面 设计 的 原则 是 什么 ? 
2-4 界面 设计 的 意义 是 什么 ? 
2-5 网 真 设计 中 的 文字 是 如 何 运用 的 ? 
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本 章 知 识 点 

。 色彩 基本 原理 

。 色彩 与 心理 

。 色彩 的 对 比 

。 无 色 系 颜色 与 有 色 系 颜色 的 搭配 应 用 

。 色彩 调和 

。 色彩 在 网 页 设计 中 的 应 用 

本 章 学 习 目标 

。 掌握 色彩 构成 在 平面 设计 中 的 各 种 色彩 搭配 及 其 审美 法 则 ,并 能 较 灵 活 地 将 其 运用 
于 网 页 设计 中 

。 理解 色彩 构成 的 基本 要 素 和 形象 

° 了解 色彩 构成 的 基本 概念 和 作用 


3.1 色彩 的 基本 原理 


3.1.1 色彩 的 概念 


什么 叫 色彩 ? 色彩 是 如 何 被 感知 的 ? 

首先 光 是 感知 色彩 的 条 件 之 一 ,拥有 健康 的 眼睛 是 感知 色彩 的 条 件 之 二 ,两 者 缺 一 不 
可 。 也 就 是 说 , 当 物 象 受 光 线 照射 后 ,其 信息 通过 瞳孔 进入 视网膜 ,经 过 视神经 细胞 的 分 析 ， 
转化 为 神经 冲动 ,由 视神经 传达 到 大 脑 皮层 的 视觉 中 枢 , 这 样 才 产 生 了 色彩 的 感觉 。 

经 过 光 、 眼 睛 、 大 脑 三 个 环节 ,才能 感知 色彩 的 相貌 。 因 而 得 出 色彩 概念 : 

光 刺 激 眼 睛 所 产生 的 视 感 觉 叫 做 色彩 ;也 就 是 说 ,色彩 是 一 种 视觉 形态 ,是 眼睛 对 可 见 
光 的 感受 ; 光 , 是 感知 的 条 件 ; 色 ,是 感知 的 结果 。 

这 样 感知 色彩 的 过 程 ,叫做 精神 物理 过 程 : 物理 一 生理 一 心理 。 

物理 : 主要 是 研究 光 的 性 质 与 光量 的 问题 。 

生理 : 主要 是 研究 视觉 细胞 对 光 与 色 的 反应 及 大 脑 思维 的 生理 反应 问题 。 

心理 : 主要 是 研究 思维 与 意识 色彩 的 伦理 美学 的 心理 因素 问题 。 

以 精神 物理 、 精 神 生 理 的 观念 来 理解 色彩 领域 ,是 现代 色彩 学 研究 的 基础 。 
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3.1.2 光 与 色彩 


人 们 能 感知 缤纷 的 世界 的 关键 是 光 , 光 是 一 种 电磁 波 辐射 能 源 。 

光源 光一 一 主要 分 为 两 种 : 一 种 是 自然 光 , 主 要 是 阳光 ; 另 一 种 是 人 造 光 ,例如 电灯 光 、 
蜡烛 光 煤气 灯光 等 。 学 习 色 彩 主要 是 以 太阳 光 为 研究 对 象 。 

1669 年 ,英国 的 物理 学 家 牛顿 发 现 了 光谱 色 。 太 阳光 经 过 三 棱镜 折射 ,投射 到 白色 屏 
幕 上 ,会 显 出 一 条 美丽 的 光谱 ,依次 为 红 、 橙 、 黄 \ 绿 、 青 、 蓝 、 紫 ,如 图 3-1 所 示 。 


38 щщ GEGEN ON 


3.1.3 色彩 的 混合 


现实 生活 中 ,将 两 种 以 上 不 同 的 色相 进行 混合 ,会 产生 出 新 的 色相 。 这 种 现象 在 色彩 搭 
配 的 实践 中 经 常 发 生 ,并 会 伴随 着 生活 的 变化 而 不 断 的 演变 ,这 对 色彩 的 调配 具有 十 分 重要 
的 指导 作用 。 
色彩 的 混合 形式 是 非常 复杂 的 过 程 。 当 色彩 在 混合 后 进入 人 的 视觉 时 ,将 会 以 两 种 形 
式 表现 出 来 ,一 种 是 光 混 合 或 叫 加 色 混 合 , 另 一 种 是 色 料 混合 也 叫 减 色 混合 或 负 混 合 。 当 色 
彩 在 进入 视觉 后 再 进行 混合 ,我们 则 把 它 叫做 中 性 混合 。 
1. 加 色 混 合 
加 色 混 合 也 称 色 光 混 合 或 叫 正 混合 ,将 不 同色 相 的 光源 ,同时 投 照 在 一 起 ,合照 出 新 的 
色光 ,是 光 的 混合 种 类 之 一 。 
光 色 混合 后 的 色光 明度 高 于 混合 前 的 原 有 色光 的 明度 。 色 光 混 合 次 数 越 多 ,明度 就 越 
高 ,这 就 是 光 色 混合 的 基本 原理 , 称 为 加 色 混 合 。 舞 台灯 光彩 色 照 片 . 彩 色 电 视 机 显 色 , 均 
为 运用 加 色 混 合 原理 处 理 色彩 的 。 
原色 光 : RARR O Ж.Ш 3-2 所 示 。 
间 色 光 : 由 两 个 原色 光 混 合 而 成 。 
朱红 色光 十 浴 绿 色光 = 黄色 光 
浴 绿 色光 十 蓝 紫 色光 = 蓝 色 光 
蓝 紫色 光 十 朱红 色光 = 紫红 色光 
补 色 光 : 原色 光 与 色 相 环 上 相对 着 的 间 色 光 互 为 补 色 关系 。 
白色 光 : 一 对 补 色光 加 在 一 起 便 成 为 白色 光 。 
蓝 紫 色光 十 黄色 光 = 白色 光 
朱红 色光 十 蓝 绿色 光 = 白色 光 
浴 绿 色光 十 品 红 色光 = 白色 光 
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三 原色 光 相 加 = 白色 光 
如 果 只 通过 两 种 色光 相 混 后 就 能 产生 白光 ,那么 这 两 种 色光 就 是 互补 关系 。 例 如 : dE 
紫色 光 与 黄色 光 ; 梁 绿色 光 与 紫红 色光 ;朱红 色光 与 蓝 色光 等 都 是 互补 色光 关系 。 图 3-3 所 
示 为 补 色光 的 混合 相 加 效果 。 


图 3-2 


2. 减 色 混合 
色 料 的 混合 称 减 色 混合 或 叫 负 混合 , 它 与 光 的 混合 相反 ,不 是 反光 强度 的 增加 ,而 是 吸 
光 能 力 的 集合 。 色 料 混合 次 数 越 多 .吸光 越 强 , 纯 度 、 明 度 越 来 越 低 。 也 就 是 说 , 色 料 相 调 的 
种 类 越 多 , 则 越 容 易 出 现 脏 、 灰 的 效果 。 
色 料 的 三 原色 : 品 红 、 蓝 色 、 本 榜 黄 ,如 图 3-4 所 示 。 
那么 ,三 种 原色 之 间 的 混合 又 会 产生 怎样 的 效果 呢 ? 
色 料 的 三 间 色 : 
品 红 十 蓝 色 = КЖЕ 
柠 榜 黄 十 品 红 = 橙色 
蓝 色 +R = 绿色 
因此 蓝 紫色 .橙色 .绿色 又 可 称 为 间 色 或 者 叫 第 二 次 色 。 
如 果 两 种 颜色 混合 后 能 产生 黑色 或 灰色 ,这 两 种 色 就 是 互补 色 ,图 3-5 所 示 为 色 料 互补 


的 混合 效果 。 
图 3-4 图 3-5 
色 料 的 互补 色 : 
蓝 色 十 红色 = 黑色 或 灰色 
柠 榜 黄 十 蓝 紫 色 = 黑色 或 灰色 
绿色 十 品 红 = 黑色 或 灰色 
3. 中 性 混合 


中 性 混合 有 两 种 : 旋转 混合 和 空间 混合 。 中 性 混合 是 色光 混合 的 一 种 ,色相 的 变化 同 
样 是 加 色 混 合 ,纯度 有 所 下 降 , 明 度 不 像 加 色 混合 那样 越 混合 越 亮 , 也 不 像 减 色 混合 那样 越 
混合 越 暗 : 而 是 混合 色 的 平均 明度 ,因此 称 为 中 性 混合 ,如 图 3-6 所 示 。 

(1) 旋转 混合 

旋转 混合 属于 颜料 的 反射 现象 。 在 圆 形 转盘 上 贴 上 两 块 或 两 块 以 上 色 纸 ,并 使 之 快速 
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旋转 ,如 我 们 通常 所 见 自行 车 轮 上 有 两 块 色 板 , 一 块 是 红色 ,一块 是 黄色 , 当 自 行车 轮 快速 旋 
转 时 就 会 产生 一 种 混合 色 一 一 橙色 ,这 一 现象 我 们 称 它 旋转 混合 。 正 如 上 面 的 例子 ,由 于 旋 
转 使 红 、 黄 两 色 反复 刺激 视网膜 同一 部 位 ,两 色 连 续 不 断 地 交 蔡 ,因此 在 视网膜 上 发 生 红 、 黄 
两 色光 混合 而 产生 橙色 的 感觉 ,如 图 3-7 所 示 。 


图 3-6 


(2) 空间 混合 

将 两 种 或 两 种 以 上 的 颜色 并 置 在 一 起 ,通过 一 定 的 空间 距离 ,在 人 们 的 视觉 内 达成 的 混合 
叫做 空间 混合 ,又 叫 并 置 混合 。 这 种 混合 与 前 两 种 混合 的 不 同 点 在 于 (加 色 混 合 与 减 色 混合 都 
是 在 色彩 未 进入 眼睛 之 前 即 在 视觉 外 混合 好 的 ,再 由 眼睛 看 到 ) 其 颜色 本 身 并 没有 真正 混合 ， 
但 它 必须 借助 一 定 的 空间 距离 来 完成 ,如 图 3-8、 图 3-9、 图 3-10 和 图 3-11 所 示 的 学 生 作 品 。 
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空间 混合 是 在 人 们 的 视觉 内 完成 的 , 故 也 叫做 视觉 调和 。 

空间 混合 的 效果 取决 于 两 个 方面 : 一 是 色 形状 的 肌理 , 即 用 来 并 置 的 基本 形 , 比 如 小 色 
线 , 小 色 点 、 网 格 \ 不 规则 的 形态 等 ,这 些 排列 有 序 的 形态 越 小 ,混合 的 效果 就 越 明显 ,肌理 效 
果 也 越 强 ;二 是 观看 者 距离 的 远近 ,同一 个 物体 , 远 看 是 大 效果 , 近 看 形象 清晰 、 层 次 分 明 , 明 
暗 属于 中 性 状态 。 

这 两 种 混合 , 均 是 中 性 混合 ,混合 出 新 色彩 的 明度 基本 等 于 参加 混合 色彩 明度 的 平均 
值 。 法 国 印象 派 画 家 修 拉 的 油画 作品 、 电 视屏 幕 的 成 像 、 彩 色 印 刷 、 纺 织品 设计 的 经 纬 并 置 ， 
都 在 一 定 距离 内 产生 了 视觉 上 的 色彩 混合 。 这 种 混合 在 一 定 距 离 内 往往 可 以 将 不 同 的 鲜艳 
色彩 转化 为 含 藉 的 协调 色彩 ,原因 是 这 种 混合 受到 空间 距离 及 空气 清晰 度 变化 的 影响 ,空间 
环境 也 对 色光 起 到 阻碍 和 衰减 作用 , 故 空间 混合 会 因 距 离 产 生 色 彩 含 灰 的 协调 现象 。 
图 3-12 所 示 为 修 拉 作 品 ( 大 碗 岛 上 的 星期 日 ), 图 3-13 所 示 为 线 的 空间 混合 。 


图 3-12 图 3-13 


3.1.4 色彩 的 属性 


1. 有 彩色 和 无 彩色 

色彩 可 分 为 有 彩色 和 无 彩色 两 大 类 。 黑 ` 白 .灰色 属于 无 彩色 ,在 物理 角度 看 ,我 们 在 光 
谱 上 看 不 到 这 三 种 色 , 但 在 色 度 学 上 称 之 为 黑白 系列 ,因此 不 能 称 为 色彩 。 在 心理 学 上 它们 
有 着 完整 的 色彩 性 质 , 在 色彩 体系 中 扮演 着 重要 角色 。 无 彩色 系 没有 色相 和 纯度 ,只 有 明度 
变化 。 色 彩 的 明度 可 用 黑白 度 来 表示 ,明度 越 高 , 越 接近 白色 ;反之 则 越 接近 黑色 。 因 为 黑 、 
白灰 在 颜料 中 担当 着 重要 的 角色 。 所 以 黑白 \ 灰 在 心理 上 、 物 理 上 、 化 学 上 都 可 称 为 色彩 。 

在 光谱 上 显现 出 的 红 \ 橙 、 黄 ` 绿 . 蓝 、. 紫 ,都 属 有 彩色 系 。 将 传统 的 三 原色 : 品 红 、 蓝 色 、 
柠 榜 黄 的 色彩 按 一 定量 调配 出 三 间 色 橙色 、 绿 色 、 蓝 紫色 , 即 是 光谱 上 的 基本 色 。 基 本 色 之 
间 不 同 量 的 混合 和 基本 色 与 黑 、 白 ,灰色 之 间 不 同 量 的 混合 .会 产生 出 成 下 上 万 种 有 彩色 。 
只 有 有 彩色 系 才 具备 色彩 的 三 要 素 : 色相 ,上 明度、 纯度。 有 彩色 系 与 黑白 、 灰 不 同比 例 调配 
出 的 色彩 仍 属于 有 彩色 ,图 3-14 所 示 为 无 彩色 明度 色 阶 与 有 彩色 的 明度 值 。 

无 彩色 仅 有 明度 的 变化 ,但 它们 可 以 极 大 地 丰富 有 彩色 系 的 色彩 层次 变化 。 

色彩 构成 概念 一 一 是 构成 基础 训练 中 的 一 个 重要 组 成 部 分 ,根据 构成 原理 ,将 色彩 按照 
一 定 的 关系 原则 去 组 合 , 创 造 出 (调配 出 ) 适 合 的 美好 色彩 ,这 种 创造 (调配 ) 过 程 , 称 为 色彩 
构成 。 
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图 3-14 


2. 色彩 的 三 要 素 

正常 的 视觉 所 感知 的 色彩 (有 彩色 系 ) 具 有 构成 色彩 的 三 个 基本 条 件 ,也 称 色彩 的 三 属 
性 , 即 明度 .色相 、 纯 度 。 

(1) 明度 (value) 

ЖЖ: 色彩 的 明暗 程度 称 明度 。 

物理 学 上 ,光波 的 振幅 宽 罕 ,决定 色彩 的 明暗 程度 。 振 幅 越 宽 , 进 光量 越 大 ,物体 对 光 的 
反射 率 越 高 ,明度 也 就 越 高 ;反之 ,振幅 越 窗 ,明度 也 就 越 低 。 

白色 是 最 明亮 的 色 ,黑色 则 是 最 暗 的 ,任何 一 个 颜色 , 想 提高 明度 则 加 上 白色 ; 想 降低 明 
度 , 则 加 上 黑色 。 图 3-15 所 示 为 明度 推移 。 


图 3-15 
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明度 可 以 从 两 个 方面 分 析 : 一 是 各 种 色相 之 间 的 明度 就 有 差别 ,同样 的 纯度 ,黄色 最 
高 , 蓝 紫 色 最 低 , 红 色 居 中 ;二 是 同一 色相 的 明度 , 因 光 量 的 强 弱 而 产生 不 同 的 明暗 变化 。 明 
度 在 色彩 构成 学 中 被 称 为 “色彩 的 骨架 ”, 任 何 色彩 均 有 其 明暗 关系 , 它 是 色彩 关系 的 架构 ， 
有 其 自身 的 美学 价值 和 表现 魅力 (如 黑白 照片 .电影 .素描 )。 没 有 明暗 关系 的 构成 ,色彩 也 
会 失去 分 量 而 显得 苍白 无 力 , 只 有 介入 明度 的 变化 , 才 可 以 展示 出 色彩 的 丰富 层次 变化 。 
图 3-16 所 示 为 两 色 明 度 推 移 , 图 3-17 所 示 为 多 色相 明度 推移 。 


图 3-16 


(2) 色相 (hue) 

概念 : 色彩 的 相貌 称 色相 。 确 切 地 说 ,是 不 同 波长 的 光 给 人 不 同 的 色彩 感受 。 色 彩 的 
相貌 是 由 波长 决定 的 。 红 .橙黄 , 绿 、 蓝 、 紫 ,每 一 个 字眼 都 是 一 个 具体 色相 的 称谓 ,由 于 波 
长 各 不 相同 , 旦 现 出 的 色相 也 就 不 尽 相 同 。 

不 同 相 貌 色 彩 的 名 称 代表 着 不 同 波光 给 人 的 不 同 的 特定 感受 ,并 形成 一 定 的 秩序 。 色 
相 坏 中 的 等 量 距离 排列 是 人 为 的 (七 彩色 中 色彩 排列 不 是 等 距 的 ), 色 相 环 可 以 分 为 5 色 、 
8 色 、10 色 、24 色 等 ,只 要 把 各 种 原色 加 入 不 同 间 色 就 可 以 调配 出 无 数 种 颜料 。 我 们 可 以 看 
到 在 色相 环 中 ,从 暖色 到 冷色 : 如 红 橙 色 一 一 橙色 一 一 中 黄色 一 一 柠檬 黄色 一 一 黄 绿 
色 一 一 绿色 ,也 可 以 通过 冷色 色 系 到 暖色 色 系 的 设计 : 如 蓝 紫 色 一 一 蓝 色 一 一 蓝 绿 色 一 一 
绿色 一 一 绿 黄 一 一 黄色 一 一 黄 检 一 一 橙色 一 一 红 杰 一 一 红 。 图 3-18 所 示 为 24 色色 相 环 ， 
图 3-19 所 示 为 30 色色 相 环 。 


图 3-18 图 3-19 


(3) 纯度 (chroma) 
概念 : 色彩 的 鲜 浊 程度 称 纯度 ,也 叫做 彩 度 . 艳 度 . 饱 和 度 等 , 即 波长 的 单一 或 复杂 的 程 
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度 。 有 彩色 系 中 的 红色 是 纯度 最 高 的 色相 , 栖 、 黄 、 紫 等 色 是 纯度 高 的 色相 , 蓝 色 是 纯度 低 的 
色相 。 任 何 一 个 色相 挫 进 了 其 他 成 分 ,纯度 将 变 低 。 凡 有 纯度 的 色 必 有 相应 的 色相 感 ,有 纯 
度 感 的 色 都 称 为 有 彩色 。 如 我 们 选 出 一 个 纯度 较 高 的 色相 一 一 大 红 , 再 寻找 一 个 明度 与 之 
相等 的 中 性 灰色 (灰色 是 由 白 与 黑 混合 出 来 的 ) ,然后 将 大 红 与 灰色 直接 混合 ,混合 出 从 大 红 
到 灰色 的 纯度 依次 递减 的 纯度 序列 ,得 出 高 纯度 色 、 中 纯度 色 、 低 纯度 色 。 无 彩色 没有 色相 ， 
故 纯度 为 零 。 

纯度 变化 对 人 们 的 心理 影响 极其 微妙 ,不 同年 龄 ,不同 性别 ,不 同 职业 ,不 同文 化 教育 背景 
的 人 对 纯度 的 偏爱 有 较 大 的 差异 。 高 纯度 的 色彩 加 入 白 和 黑 调 成 的 灰色 ,纯度 就 会 降低 ,成 为 
带 灰 浊 味 的 色彩 。 图 3-20 和 图 3-21 所 示 为 纯度 推移 , 表 3-1 所 示 为 明度 和 纯度 的 比值 。 


高 Bl 4d | 
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表 3- 

色相 明度 彩 度 色相 明度 xu 

а 4 14 蓝 绿 5 6 

Li 6 12 [3 4 8 

黄 8 12 蓝 紫 3 12 

黄 绿 7 10 紫 4 12 

绿 5 8 品 红 4 12 
3.1.5 色 立 体 


色彩 按照 三 属性 的 关系 ,有 秩序 地 系统 地 排列 与 组 合 ,就 可 构成 具有 三 维 立 体 色 彩 体 
# ,简称 为 色 立 体 。 

色 立 体 的 基本 骨架 是 一 个 色 立 体 的 示意 图 。 它 以 无 彩色 为 中 
心 轴 ,顶端 为 白 , 底 端 为 黑 , 中 间 分 布 不 同 明度 逐渐 变化 的 有 序 灰 
色 ; 色 相 环 呈 水 平 状 包 围 着 中 轴 , 呈 圆 形 , 如 图 3-22 所 示 。 

现在 世界 范围 内 用 得 比较 多 的 有 三 种 色 立 体 , 即 美国 的 孟 赛 尔 
色 立 体 、 德 国 的 奥 斯 特 瓦 色 立 体 、 日 本 色 研 究 所 的 色 立 体 (PCCS 色 
立体 ) 。 

1. 孟 赛 尔 色 立 体 

和 孟 塞 尔 色 立 体 是 由 美国 教育 家 、 色 彩 学 家 .美术 家 乔 塞 尔 于 
1905 年 创立 并 发 表 的 色彩 表示 法 。1929 年 和 1943 年 经 美国 国家 
标准 局 和 美国 光学 会 两 次 修订 。 现 公布 的 最 新 版 本 有 两 套 样品 : 一 
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套 有 光泽 ,包括 1450 块 颜色 , 附 有 37 块 中 性 灰色 ;一 套 无 光泽 ,包括 1150 块 颜色 , 附 有 32 
块 中 性 灰色 。 图 3-23 所 示 为 孟 赛 尔 色 立体 示意 图 ,图 3-24 为 备 赛 尔 色 立体 纵横 面 示意 图 。 


图 3-24 


乔 塞 尔 色 立体 以 色彩 的 三 要 素 为 基础 ,hue 表示 色相 ,简写 为 H; value 表示 明度 ,简写 
为 Vichroma 表示 为 纯度 ,简写 为 C。 

在 孟 塞 尔 色 立 体 的 色相 环 中 ,以 红 (R) , 3E CYO E COO 、 蓝 (B)、 紫 (P) 为 5 个 基本 色 。 在 
相 邻 的 色相 间 各 增加 黄 红 (YR) EAR CY GO 、 蓝 绿 (BG)、 蓝 紫 (BP)、 红 紫 (RP) 构 成 10 个 主 
要 色相 ,每 个 色相 又 分 为 10 个 等 份 , 最 后 设计 为 100 个 色相 。 图 3-25 所 示 为 孟 塞 尔 色 立体 
色相 环 ,图 3-26 所 示 为 孟 塞 尔 色 立体 纵 截 面 示意 图 。 


图 3-25 
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2. 奥 斯 特 瓦 德 色 立 体 

奥 斯 特 瓦 德 是 德国 伟大 的 物理 学 家 、 化 学 家 , 1916 年 发 表 了 对 色彩 体系 的 标准 理论 ， 
并 于 1923 年 提出 奥 斯 特 瓦 德 色 立体 。 奥 斯 特 瓦 德 深入 地 研究 了 有 关 色 彩 调和 的 问题 ,形成 
了 一 整套 配色 理论 。 

奥 斯 特 瓦 德 色相 环 以 生理 四 原色 黄 (Y) 、 蓝 (B)、 红 (R)、 绿 (C) 为 基础 ,将 四 色 分 别 放 在 
圆周 的 4 个 等 分 点 上 ,成 为 两 组 补 色 对 比 。 然 后 再 在 两 色 中 间 依 次 增加 橙 (O)、 紫 (P) 、 蓝 绿 
(BG) 、 黄 绿 (YG) 四 色相 , 计 8 个 主 色 相 。 将 每 一 曲目 再 分 为 三 个 色相 ,成 为 24 色相 色 环 。 
色相 按 顺 时 针 顺 序 排列 为 黄 , 橙 . 红 、 紫 、 蓝 \ 蓝 绿绿 、 黄 绿 。 从 开始 定 为 1 号 黄 直 到 24 号 黄 
绿 ,每 一 色相 以 中 间 2 号 为 正 色 。 图 3-27 所 示 为 奥 斯 特 瓦 德 24 色相 环 , 图 3-28 为 奥 斯 特 瓦 
德 色 立 体 示意 图 。 

3. 日 本 色彩 研究 所 的 色 立 体 (PCCS 色 立 体 ) 

日 本 色彩 研究 所 配色 体系 简称 P.C、C.、S 色 立 体 。 日 本 色彩 研究 所 在 1951 年 研究 出 一 
套 新 的 “色彩 标准 ”后 ,经 过 13 年 的 改进 及 测试 ,于 1964 年 正式 发 表 日 本 色彩 研究 所 配色 体 
系 ,1965 年 公开 被 采用 ,这 是 东方 人 制定 发 展 出 来 的 色彩 应 用 体系 。 

PC\C.S 色 系 是 根据 备 塞 尔 色 立 体 及 奥 斯 特 瓦 德 色 立 体 的 特点 , 奔 其 两 者 的 不 足 , 并 
使 用 东方 人 比较 容易 接受 的 色彩 名 字 。 

P、C、C、S 色 立体 色相 环 以 光谱 上 红 、 检 、 黄 、 绿 、 蓝 、 紫 6 个 主要 色相 为 基础 ,并 调配 以 
24 色相 的 色相 环 ,表示 法 为 1 红 .2 黄 味 红 .3 红 橙 ,4 @.5 RRR, 6 HIE L7 红 味 黄 ,8 W, 
9 绿 黄 ,10 黄 绿 ,11 黄 味 绿 ,12 绿 ,13 蓝 味 绿 ,14 蓝 绿 ,15 绿 味 蓝 ,16 蓝 ,17 紫 味 蓝 ,18 蓝 味 
紫 ,20 紫 ,21 紫 ,22 紫 味 红 ,23 红 紫 ,24 紫 味 红 。 这 个 色 环 因为 注重 等 色相 差 的 感觉 ,也 叫 
做 等 差 色 环 。 其 中 互 为 补 色 关系 的 色 ,不 在 直径 两 端的 位 置 。 为 了 学 习 方 便 ,也 为 弥补 这 个 
缺点 ,还 另外 备 有 12 色相 的 补 色色 环 。 

P.C.C.S 的 明度 阶段 为 9 级 ,最 下 为 黑 . 最 上 为 白 ,中 间 为 等 感觉 差 的 灰色 7 级 ,整个 
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明度 阶段 顺序 为 1.0 黑 ,2.4、3.5、4.5、5.5、6.5、7.5、8.5 为 7 级 不 同 明度 的 灰色 ,9.5 为 白 。 
图 3-29 所 示 为 日 本 PCCS24 色相 环 ,图 3-30 所 示 为 日 本 PCCS24 色相 环 。 
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3.2 色彩 与 心理 


色彩 具有 精神 的 价值 。 人 常常 感受 到 色彩 对 自己 的 心理 影响 。 这 些 影 响 总 是 在 不 知 不 
觉 中 发 生 作用 ,左右 我 们 的 情绪 。 色 彩 的 心理 效应 ,主要 从 两 个 方面 来 研究 ,一 种 是 由 色彩 
的 物理 性 直接 导致 的 某 些 心理 体验 ,可 称 为 色彩 的 直接 心理 效应 。 如 高 明度 色相 刺眼 ,使 人 
心慌 ;红色 鲜艳 使 人 兴奋 , 属 直接 的 心理 效应 。 二 是 色彩 的 间接 性 心理 效应 。 如 饱和 的 红色 
会 令 人 产生 兴奋 ,闷热 的 心理 情绪 ,从 而 联想 到 火 、 血 、 红 旗 等 概念 ;这 种 由 前 种 效应 而 联想 
到 更 强烈 的 效应 属 间接 性 效应 。 因 此 色彩 心理 效应 涉及 人 的 观念 、 信 仰 ,对 于 设计 师 来 说 ， 
哪 一 层次 的 心理 效应 都 不 能 忽视 。 


3.2.1 色彩 与 调 性 


色 性 是 指 某 一 单独 颜色 的 性 质 。 通 常 在 讲述 色彩 或 运用 色彩 时 ,头脑 中 总 要 比较 明确 
地 知道 所 针对 的 是 哪 一 种 颜色 或 哪 一 种 调子 ,以 及 它们 的 基本 性 格 、 特 征 , 与 什么 色 搭配 更 
和 谐 等 。 因 为 不 同 的 颜色 有 着 不 同 的 表现 价值 , 它 的 调和 关系 也 各 不 相同 。 所 以 ,要 想 充分 
地 利用 色彩 传达 感情 ,了 解 一 下 各 种 色彩 的 不 同性 质 以 及 其 所 具有 客观 表现 性 ,就 显得 很 
重要 。 

下 面 主要 讲解 有 彩色 系 中 的 红 、 橙 、 黄 \ 绿 、 蓝 、 紫 几 个 基本 色相 和 无 彩色 系 中 的 黑白、 
灰 的 色 性 。 

1. 红色 

红色 是 一 种 非常 注目 的 颜色 ,在 可 见 光谱 中 红色 的 光波 最 长 ,所 以 最 容易 引起 人 们 的 
注意 。 
积极 的 含义 : 热情 兴奋、 激烈 喜庆 、 革 命 吉 利 、 兴 隆 、 爱 情 、 火 热 、 活 力 。 
消极 的 含义 : 危险 疼痛、 紧张 .屠杀 、 残 酷 .事故 .战争 .爆炸 。 
红色 是 警告 .危险 .防火 的 指定 色 。 红 色 不 仅 在 节日 喜庆 时 被 人 们 广泛 采用 ,作为 欢乐 、 
庆典 、 胜 利 时 的 装饰 色彩 ,而 且 它 也 是 标志 、 宣 传 品 ` 包 装 设计 .服装 设计 常常 采用 的 色彩 。 
在 包装 设计 中 的 成 功 案例 如 "可口可乐 "等 ,而 自然 界 的 包装 代表 有 红 苹果 草莓 。 总 而 言 
之 ,红色 是 一 种 热烈 .冲动 有 活力 的 色彩 。 

红色 在 网 页 设计 、 广 告 \ 包 装 、 构 成 中 的 运用 随处 可 见 ,图 3-31 所 示 为 红色 在 包装 设计 
中 的 应 用 ,图 3-32 所 示 为 红色 在 可 口 可 乐 广告 设计 中 的 运用 ,图 3-33 所 示 为 粉红 色 在 网 页 
设计 中 的 运用 ,图 3-34 所 示 为 红色 在 构成 设计 中 的 运用 。 

2. же 
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食品 的 色泽 较 接 近 ,橙色 使 人 觉得 饱满 成熟, 富有 很 强 的 食欲 感 , 故 在 食品 包装 中 被 广泛 应 
用 。 此 外 ,橙色 的 注目 性 也 很 强 , 在 工业 用 色 中 , 它 是 警戒 的 指定 色 , 如 养路 工 的 工作 服 、 救 
生 衣 、 救 生 圈 、 欧 洲 的 环卫 工 的 工作 服 等 。 

积极 的 含义 : 成 熟 .生命 永恒、 华贵 热情、 富丽 、 活 跃 .辉煌 、 兴 奋 温暖。 
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消极 的 含义 : 暴躁 .不安 ,欺诈 嫉妒。 
自然 界 的 包装 代表 是 橘子 。 橙 色 在 网 页 ,绘画 广告 、 构 成 中 的 运用 ,如 图 3-35 所 示 为 
橙色 在 构成 设计 中 的 运用 ,图 3-36 所 示 为 橙色 在 包装 设计 中 的 运用 。 


az 


图 334 图 3-35 
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3. 黄色 

黄色 的 波长 适中 ,是 有 彩色 中 最 亮 的 色彩 ,给 人 以 轻快 . 透明、 辉煌、 充满 希望 的 色彩 印 
象 。 黄 色 是 以 其 色相 纯 、 明 度 高 .色觉 暖和 和 可 视 性 强 为 特征 。 

积极 的 含义 : 光明、 兴奋、 明朗、 活泼、 丰收 \ 恰 悦 、 轻 快 、 财 富 、 权 力 。 

消极 的 含义 : ps IBS РВ. F i o 

黄色 在 我 国 古 代 是 帝王 的 象征 ;在 古 罗马 时 期 也 被 当 作 是 高 贵 的 颜色 ,普通 人 不 准 使 
用 ;美国 .日 本 把 黄色 作为 思念 和 期 待 的 象征 。 黄 色 是 19 世纪 末 的 色彩 ,被 印象 派 画家 凡 。 
高 发 挥 得 淋漓 尽 致 ,其 作品 4 向日葵)( 见 图 3-37) 是 黄色 色彩 运用 的 经 典范 例 。 

黄色 常常 运用 在 商品 包装 、 职 业 服 装 上 ,如 交通 警察 的 马甲 , 帆 饰 、 工 程 机 械 、 养 路 工 的 
马甲 ,有 着 表示 紧急 和 安全 的 意义 。 在 产品 包装 上 成 功 使 用 黄色 的 例子 是 “柯达 ”胶卷 。 自 
然 界 的 包装 代表 有 香花 柠檬 。 图 3-38 所 示 为 黄色 在 构成 网 页 设计 中 的 运用 ,图 3-39 所 
示 为 黄色 在 网 页 设计 中 的 运用 。 


this ste, 
Use of this site signifies your agreement to the terms of use, 
Pinasa click huru for Disney Onlinu's Пот Privacy Policy and 


Internet Safety Information, 
© Disney. АЙ rights reserved. 


图 3-37 图 3-38 


图 3-39 


4. 绿色 
绿色 波长 居中 ,是 最 养眼 的 色彩 ,是 比较 稳定 的 .中 性 的 .温和 的 色彩 。 在 色相 环 里 是 黄 
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蓝 之 间 产 生 的 间 色 。 绿 是 大 自然 的 主要 色彩 。 嫩 绿 、 草 绿 象征 着 春天 成 长 .生命 和 希望 ,是 
青年 色 的 代表 ;中 绿 、 梁 绿 象征 着 盛夏 、 兴 旺 ; 深 绿 是 森林 的 色彩 。 绿 色 的 表现 力 丰 富 、 充 实 。 

积极 的 含义 : 自然 ,和平 .生命 .青春 ,畅通 、 安 全 .宁静 、 平 稳 USB. 

消极 的 含义 : 生 酸 、 失 控 。 

如 在 包装 设计 中 的 成 功 案例 “富士 胶卷。 自然 界 的 包装 代表 有 绿茶 。 绿 色 在 网 页 设 
计 \ 广 告 \ 包 装 、 构 成 中 的 运用 随处 可 见 , 图 3-40 所 示 绿 色 在 网 页 设计 中 的 运用 ,图 3-41 为 
粉 绿色 在 网 页 设计 中 的 运用 。 


5. 蓝 色 

蓝 色 的 波长 较 短 。 蓝 色 是 有 彩色 系 里 最 冷 的 一 个 色调 ,是 天 空 海洋、 湖泊 的 颜色 。 蓝 
色 给 人 以 极 强 的 现代 感 ,高 科技 的 展示 常 使 用 蓝 色 ,而 男士 产品 包装 设计 也 常用 蓝 色 。 

积极 的 含义 : AT FR Em ET VA Aii A A ВВ 
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消极 的 含义 : EUR Dod е RBS. 
如 果 蓝 色 加 上 白色 则 给 人 以 清淡 、 聪 明 伶俐 、 高 雅 、 轻 重 的 心理 ,加 上 黑色 则 给 人 以 奥 
秘 , 沉 重 , 大 风浪 . 斐 观 .幽深 、 孤 个 的 心理 ,加 上 灰 ( 浊 色 ) 色 ,给 人 以 粗俗 可怜、 笨拙 .压力 、 
贫困 的 心理 。 在 产品 包装 上 成 功 使 用 蓝 色 的 例子 是 “百事 可 乐 ”, 药 品 ,冷冻 食品 的 包装 也 用 
得 较 多 。 蓝 色 在 设计 中 的 运用 如 图 3-42、 图 3-43、 图 3-44 和 图 3-45 所 示 o 


EN UPPVISNING 1 МАКЕ SENSE 


6. 紫色 
紫色 的 波长 最 短 ,是 色相 中 最 暗 的 色调 。 据 说 ,紫色 只 有 在 一 些 少数 的 特殊 动 植物 或 矿 
物 中 才能 提取 出 来 ,极为 稀少 ,因此 显得 特别 珍稀 。 它 代表 着 高 贵 、 庄 重 、 奢 华 。 在 我 国 封建 
社会 中 ,只 有 高 官 和 贵 妇 才能 穿 紫 服 。 在 古 希 腊 , 紫 色 则 作为 国王 的 服装 色彩 。 伊 顿 (伊顿 
Jogannes ltten,1888 一 1967 年 ,瑞士 人 。 他 是 一 位 著名 的 画家 、 雕 刻 家 、 美 术 理论 家 和 艺术 


教育 家 。 毕 生 从 事 色 彩 学 的 研究 ,被 誉 为 现代 色彩 艺术 领域 中 最 有 影响 的 色彩 大 师 。) 即 形 
容 其 为 非 知觉 色彩 。 
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图 3-44 


积极 的 含义 : 高 贵 `. 和 久远、 神秘 .豪华 .生命 ,温柔 爱情、 端庄 俏丽、 娇艳。 

消极 的 含义 : 痛苦 、. 压 迫 、 哀 伤感 。 

在 包装 设计 上 ,女性 化 妆 品 常用 淡 紫 色 ,洗涤 用 品类 较 常 使 用 紫色 。 自 然 界 的 包装 代表 
是 茄子 。 

紫色 在 设计 ,构成 中 的 运用 如 图 3-46 和 图 3-47 所 示 。 
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图 3-46 图 3-47 


7. 和 白色 

白色 的 明度 最 高 ,白色 在 心理 上 能 造成 明亮 干净、 纯洁、 扩张 感 。 但 白色 也 有 很 多 类 似 
空虚 \ 投 降 、 绿 缆 、 麻 烦 不 断 等 带 有 贬义 的 色彩 特征 。 西 方 人 举行 婚礼 ,新 娘 身 披 白 纱 , 象 征 
纯洁 和 忠贞 。 

积极 的 含义 : 纯洁 .干净 .明亮 .轻松 朴素 卫生、 凉爽 .淡雅 。 

消极 的 含义 : 恐怖 ,冷峻 ,单薄 、 孤 独 。 

白色 与 各 种 颜色 都 比较 容易 协调 ,所 以 ,在 实际 应 用 中 它 是 非常 重要 的 。 在 包装 上 ,白色 
的 使 用 率 较 高 。 白 色 在 服装 中 的 应 用 如 图 3-48 和 图 3-49 所 示 。 

8. 黑色 

黑色 在 心理 上 容易 联想 到 黑暗 .悲哀 ,给 人 一 种 沉静 、 神 秘 的 气氛 感 。 黑 色 的 明度 最 低 ， 
也 最 有 分 量 .最 稳重 ,有 一 种 特殊 的 魅力 ,显得 既 庄 重 又 高 贵 。 
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3-48 3-49 


近年 来 ,在 包装 上 要 表现 高 级 感 \ 男 性 美 、 高 雅 、 朴 素 、 深 沉 、 强 烈 的 个 性 等 印象 时 ,黑色 
的 象征 表达 力 最 强 。 许 多 科技 含量 较 高 的 轻工业 产品 都 采用 了 黑色 ,如 电视 机 、 音 响 设备 、 
实验 仪器 、 照 相机、 摄像 机 、 随 身 听 等 。 

积极 的 含义 : 庄重 ,深沉 ,高 级 .幽静 深刻. 厚实、 稳定、 成 熟 。 

消极 的 含义 : ER ШЕ, ЖН Л. 

黑色 在 包装 设计 ,广告 设计 、 网 页 设计 中 的 应 用 如 图 3-50、 图 3-51 和 图 3-52 所 示 。 


' 
图 3-51 
9. 灰色 
灰色 是 在 黑 与 白 之 间 ,属于 中 性 。 灰 色 能 起 到 调和 各 种 色相 的 作用 ,是 设计 和 绘画 中 最 
重要 的 配色 元 素 。 


漂亮 的 灰 也 能 给 人 以 高 雅 、 精 臻 .含蓄 的 印象 . 它 是 城市 色彩 的 象征 。 

积极 的 含义 : 高 雅 . 沉 着 .平和 ,平衡 连贯 、 联 系 、 过 渡 。 

消极 的 含义 : 凄凉 .空虚 、 抑 郁 、 暧 昧 、 乏 味 ,、 沉 闽 。 

黑 , 白 、 灰 在 色调 组 合 中 是 不 可 缺少 的 ,它们 的 应 用 相当 普遍 ,是 达到 色彩 调和 的 最 佳 
“调和 剂 ?。 黑 、 白 、 灰 永远 不 会 被 流行 色 所 淘汰 。 
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图 3-52 


灰色 在 设计 中 的 运用 如 图 3-53 和 图 3-54 所 示 。 


图 3-53 


3.2.2 色彩 的 感觉 


色彩 可 以 表达 丰富 的 情感 效应 。 人 的 感觉 器 官 是 互相 联系 、 互 相 作 用 的 整体 。 利 用 一 
定 的 色调 不 仅 可 以 带 来 视觉 上 的 感受 ,同时 刺激 人 的 各 种 感官 产生 多 种 情绪 感应 ,如 冷暖 
感 、 轻 重 感 、 华 丽 与 朴素 感 等 多 种 感觉 。 

1. 色彩 的 冷暖 感 

在 色彩 学 中 ,把 不 同色 相 的 色彩 分 为 热 色 ,冷色 ,从 红 紫 ` 红 \ 橙 、 黄 到 黄 绿色 称 为 热 色 ， 
以 橙色 最 热 。 从 青紫 、 青 至 青绿 色 称 冷色 .以 青色 为 最 冷 。 紫 色 是 红 与 青色 混合 而 成 的 , 绿 
色 是 黄 与 青 混合 而 成 的 ,因此 也 有 人 称 它们 为 温 色 。 但 是 色彩 的 冷暖 既 有 绝对 性 ,也 有 相对 
TE. fa SEE Оа. ERAR APERE , 色 感 愈 冷 。 例 如 红色 比 红 橙 色 较 冷 , 但 不 能 说 红色 
是 冷色 ,而 红色 又 比 紫色 热 。 图 3-55 所 示 为 暖色 构成 设计 ,图 3-56 所 示 为 冷色 构成 设计 ， 
图 3-57 所 示 为 冷色 构成 设计 ,图 3-58 所 示 为 暖色 构成 设计 。 


网 页 设计 与 网 站 规划 


图 3-57 图 3-58 


2. 色彩 的 轻重 感 

一 般 来 说 ,颜色 的 轻重 感 主要 取决 于 色彩 的 明度 ,上 暗色 给 人 以 重 的 感觉 ,亮色 给 人 以 轻 
的 感觉 。 例 如 绿色 、 蓝 色 感 觉 重 ,桃红 色 、 浅 黄色 感觉 轻 。 明 度 高 的 颜色 感觉 轻 , 明 度 低 的 颜 
色 感 觉 重 。 在 色彩 设计 中 常 以 色彩 的 重量 感 来 调节 面 面 的 构图 ,达到 平衡 和 稳定 的 需要 ,以 
表现 不 同 的 性 格 WRR JEES. K 3-59 所 示 为 面料 设计 ,图 3-60 所 示 为 重 色 设计 。 
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з. 华丽 与 朴素 感 

色彩 的 华丽 与 朴素 感 主要 取决 于 色彩 的 高 纯度 的 对 比 配置 ,其 次 是 明度 和 色相 的 微妙 
变化 。 高 明度 和 高 纯度 的 色 显得 鲜艳 、 华 丽 , 低 明度 和 低 纯度 的 色 显 得 朴素 .稳重 ,活泼 、 强 
烈 ` 明 亮 的 色调 给 人 以 华丽 感 ,暗色 调 、 灰 色调 、 土 色调 给 人 以 朴素 感 。 图 3-61 所 示 为 华丽 
感 设计 ,图 3-62 所 示 为 朴素 感 设计 。 


图 3-61 图 3-62 


3.2.3 色彩 的 联想 


色彩 联想 指 人 们 看 到 某 一 色 时 ,时 常会 由 该 色 联想 到 与 其 有 关联 的 其 他 事物 ,这些 事物 
可 以 是 具体 的 物体 ,也 可 以 是 抽象 的 概念 。 色 彩 的 联想 与 平时 生活 的 经 验 最 为 密切 相关 。 
比如 说 红色 ,我 们 既 可 以 联想 到 具体 的 事物 ,如 太阳 、 火 焰 、 红 旗 、 鲜 花 等 ,也 可 以 产生 抽象 的 
联想 ,如 革命 .激昂 热情、 流血 等 ;又 如 黑色 , 既 可 以 联想 到 黑色 衣服 、 黑 汽车 ,黑夜 等 具体 事 
物 ,也 可 联想 到 死亡 ,绝望 等 抽象 概念 。 

从 心理 学 上 看 ,联想 是 知觉 的 产物 , 它 不 仅 作 
用 于 人 的 视觉 器 官 , 还 能 同时 影响 到 其 他 感觉 器 
官 ,如 听觉 ,味觉 ,嗅觉 等 。 如 图 3-63 所 示 为 流行 
音乐 乐曲 的 色彩 表现 。 

1. 听觉 ( 色 听 ) 

颜色 引起 观 者 听觉 的 感受 , 即 看 到 色彩 似 听 到 
某 种 音乐 这 就 叫做 色 听 ,包括 具体 色 与 音 的 对 应 变 
化 和 组 合 色 的 节奏 、 韵 律 . 调 子 力度 .情感 等 。 如 
黑色 是 沉重 的 , 白 是 响亮 的 , 黄 是 刺耳 的 , 青 是 温和 
的 等 。 在 国外 有 些 残 疾 人 学 校 , 教 师 就 是 用 音乐 来 图 3-63 
对 那些 先天 失明 的 人 灌输 色彩 的 概念 。 比 如 刺耳 
的 喇叭 声 像 明 亮 的 黄色 ,长 第 般 的 声音 类 似 淡 蓝 色 , 大 提琴 的 低音 像 深蓝 色 , 小 提琴 纤弱 的 
中 间 音 接近 绿色 , 强 有 力 的 击 鼓 代表 红色 。 又 如 一 段 欢快 的 乐曲 表示 黄色 ,一 段 庄重 的 音乐 
表示 黑色 ,一 段 柔 和 音乐 表示 浅 蓝 色 等 。 图 3-64 所 示 为 色 听 芭 荤 舞 、 交 谊 舞 、 民 族 舞 、 的 
士 高 。 
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2. 味觉 ,嗅觉 

色彩 具有 味觉 感 , 它 大 都 与 人 们 对 食物 的 色彩 经 验 相关 ,尤其 是 一 些 色彩 鲜明 、 味 感 明 
显 的 食物 ,比如 柠檬 的 黄色 、 辣 椒 的 红色 等 。 适 当 的 色彩 可 以 使 味 感 增强 ,所 以 在 一 般 的 食 
物 、 味 嗅觉 有 关 的 物品 色泽 或 包装 设计 上 ,除了 考虑 美观 的 因素 ,也 要 考虑 色彩 和 味 感 的 关 
系 。 如 按 色相 来 分 ,红色 通常 代表 辣 的 感觉 ;橙色 代表 香甜 ;黄色 则 代表 甜 酸 ; 绿 蓝 色 表示 酸 
涩 味 ; 咖 啡 色 代表 苦味 ;紫色 意味 着 腐 自 ;白色 为 平淡 无 味 ; 带 灰色 的 色调 是 不 好 吃 的 感觉 ; 
黑色 和 深 色色 调 是 味 浓 的 表示 。 色 彩 还 可 以 对 嗅觉 产生 作用 。 最 常见 的 是 由 某 种 色彩 联想 
到 某 种 花香 ,如 白色 使 人 联想 到 百合 花 或 夜来 香 的 气味 ;桃红 使 人 联想 到 桃花 的 芬芳 ; 茶 宰 
色 会 使 人 联想 到 焦 糊 的 气味 ; 深 色调 则 使 人 联想 到 腐败 的 气味 。 最 能 发 出 芳香 的 色相 是 黄 
绿色 。 图 3-65 所 示 为 给 人 酸味 的 颜色 ,图 3-66 所 示 为 给 人 辣 味 的 色彩 ,图 3-67 所 示 为 味觉 
表达 : BRE S UHR. 


" 


图 3-65 
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3.2.4 色彩 与 季节 


1. 春天 

黄 绿 色 是 强调 春天 特征 的 色彩 .因为 它 能 让 人 联想 到 植物 的 发 芽 。 黄 色 是 最 接近 于 阳 
光 的 颜色 ,也 是 迎春 花 、 油 菜花 的 颜色 。 白 色 的 玉兰 花 ,粉红 、 淡 紫色 的 桃花 、 禁 花 、 牡 丹 花 和 
各 种 明亮 的 粉 彩色 ,都 含有 表现 春天 自然 色 的 秩序 与 客观 性 。 春 天 的 空气 有 云霞 有 水 分 ， 
映 和 人 眼帘 的 多 是 经 过 空气 层 的 明 调 中 间 色 ,色彩 多 含有 粉 质 。 也 就 是 说 春天 的 色彩 表达 主 
要 以 亮色 调 为 主 。 

2. 夏天 

夏天 的 阳光 灿烂 强烈, 一切 充满 了 生机 和 力量 。 此 时 的 自然 界 ,无 论 是 形状 还 是 色彩 
都 是 最 豪华 的 ,色彩 间 多 为 高 彩 度 的 色相 对 比 ,再 以 明度 的 长 调 对 比 . 补 色 对 比 作为 自然 秩 
序 的 表示 。 光 线 与 阴影 的 强烈 对 照 是 夏天 的 特征 。 

3. 秋天 

秋天 的 空气 清澈 而 透明 ,是 收获 的 季节 。 色 彩 多 为 柿子 色 TE ERE LEG, ,山里 
红色 葡萄 色 等 。 秋 天 很 少 有 绿色 , 除 常 绿 树木 外 ,其 他 树木 都 变 成 红 、` 橙 . 黄 和 彩 度 低 的 棕 
褐色 。 落 叶 后 的 树木 将 收获 色 强 烈 地 映衬 在 清漆 的 ( 暧 蓝 色 ) 秋 天 背景 中 , 辉 炮 而 又 和 谐 , 饱 
满 而 又 丰富 。 

4. 冬天 

受 雪 与 冰 所 支配 的 冬季 自然 界 , 非 常 消极 , 色 味 少 到 处 布 满 灰色 。 但 冬天 里 的 梅花 、 水 
仙 花 兰花、 雪松 、 冰 花 、 树 挂 . 枯 枝 等 也 会 使 我 们 流连 忘 返 , 得 到 美的 享受 。 透 明 而 稀薄 、 略 
带 蓝 味 或 灰 味 的 色彩 是 冬季 (主要 指 北方 ) 色 彩 的 特征 ,如 图 3-68 至 图 3-72 所 示 。 


5 m 
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图 3-71 


3.3 色彩 的 对 比 


生活 中 任何 一 个 色彩 的 存在 都 不 会 是 孤立 的 ,不 可 能 单独 被 视觉 所 感知 ,总 是 与 周围 的 
色相 相 呼 应 、 相 衬托 。 所 以 ,色彩 之 间 的 相互 作用 是 必然 的 。 色 彩 的 三 要 素 是 构成 对 比 的 主 


要 框架 ,它们 相互 依存 .相互 制约 ,改变 其 中 任何 " 
一 个 要 素 ,都 会 引起 其 他 因素 的 相应 变化 ,影响 + 
彩 的 7-9 高 调 色 
色彩 的 个 性 和 整体 视觉 效果 。 zu Be | ud 
中 调 š 
3.3.1 明度 对 比 
6 
1 明度 对 比特 点 m wa {5 os 
明度 对 比 是 将 不 同 明度 的 两 种 颜色 并 列 在 
一 起 ,产生 亮 的 更 亮 、 暗 的 更 暗 的 现象 。 明 度 对 
比 对 人 眼 的 刺激 最 为 强烈 ,明度 对 比 有 同色 相 之 m mes 
间 的 对 比 ,也 有 不 同色 相 之 间 的 对 比 。 色 彩 的 明 wa 2 | 
度 关系 在 色彩 构成 中 占有 重要 位 置 ,色彩 的 层次 1 
感 .体积 感 .空间 感 重 量 感 . 软 硬 感 等 都 是 靠 色 黑 


彩 的 明度 对 比 来 实现 的 ,如 图 3-73 所 示 。 图 3-73 
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2. 明度 调子 对 比 关 系 

明度 调子 主要 分 为 三 大 调 : 高 ( 亮 ) 调 .中 调 、 低 ( 暗 ) 调 ,以 黑白 ` 灰 系列 的 9 个 明度 阶 
梯 为 基本 标准 可 进行 明度 对 比 强 弱 的 划分 。 靠 近 白 的 3 级 称 高 明度 ( 亮 调 ), 靠 近 黑 的 3 级 
称 低 明 度 ( 暗 调 ) ,中 间 的 3 级 称 中 明度 (中 调 )。 色 彩 之 间 明 度 差别 的 大 小 决定 着 明度 对 比 
的 强 弱 。 明 度 调子 又 可 分 为 三 种 对 比 强 弱 关 系 : 长 调 、 中 调 、 短 调 。 

A) 五 级 以 上 的 对 比 为 明度 强 对 比 , 因 为 这 种 对 比 关系 在 明度 轴 上 距离 比较 长 ,明暗 差 
别 较 大 , 故 称 为 长 调 。 

(2) 三 级 以 上 ,五 级 以 内 的 对 比 为 明度 的 中 对 比 , 明 度 差 适中 , 故 称 为 中 调 。 

(3) 三 级 以 内 的 对 比 为 明度 弱 对 比 ,因为 这 种 对 比 关系 在 明度 轴 上 距离 比较 近 , 明 暗 相 
差 较 小 , 故 称 为 短 调 。 

在 明度 对 比 中 ,如 果 其 中 面积 最 大 ,作用 最 强 的 色彩 属 高 调 色 , 色 的 对 比 属 长 调 ,那么 整 
组 对 比 就 叫做 高 长 调 ; 如 果 画 面 主要 的 色彩 属 中 调 色 , 色 的 对 比 属 短 调 ,那么 整 组 对 比 就 称 
为 中 短 调 。 按 这 种 方法 ,大体 可 划分 为 10 种 明度 调子 : 高 长 调 高 中 调 ,高 短 调 .中 长 调 、 中 
中 调 .中 短 调 、 低 长 调 、 低 中 调 、 低 短 调 、 最 长 调 。 

如 上 所 述 不 同 明 度 的 色 阶 搭配 在 一 起 ,画面 会 产生 调子 , 即 高 低调 子 和 长 短 调子 。 所 谓 
高 低调 子 , 是 指 画 面 是 亮 调子 还 是 暗 调子 。 如 图 3-74 所 示 为 明度 对 比 。 
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亮色 调 (高 调 ) : 

高 长 调 : 明度 强 对 比 , 光 感 强 , 清 晰 、 活 泼 .有 跳动 感 。 
高 中 调 : 明度 中 对 比 ,柔和 ,欢快 .明朗 ,安稳 。 

高 短 调 : 明度 弱 对 比 ,辉煌 ,极其 明亮 ,很 轻柔 。 

中 间 调 : 
中 长 调 : 明度 强 对 比 ,充实 ,力度 感 强 ,敏锐 ,. 坚硬。 
中 中 调 : 明度 中 对 比 , 饱 满 . 丰 富 , 含 车 有 力 。 

中 短 调 : 明度 弱 对 比 ,膀胱 混沌、 模糊 。 
暗色 调 ( 低 调 ) : 

低 长 调 : 明度 强 对 比 ,清晰 ` 不 安 .激烈 ,有 冲击 力 。 
低 中 调 : 明度 中 对 比 ,沉着 、 稳 重 , 雄 厚 . 迟 钝 、 深 沉 。 
低 短 调 : 明度 弱 对 比 ,模糊 、 消 极 、 阴暗、 沉闷 、 神 秘 。 


3.3.2 色相 对 比 


1. 色相 对 比 的 特点 

色相 对 比 即 因 色 彩 面 积 的 大 小 或 将 色相 环 上 的 任意 两 种 颜色 或 三 种 颜色 并 置 在 一 起 ， 
从 而 形成 的 色彩 对 比 画 面 。 色 相 在 色彩 构成 中 占有 极其 重要 的 位 置 ,具有 主导 作用 ,色彩 的 
丰富 性 ,冷暖 感 、 色 彩 的 心理 及 情感 主要 靠 色 相对 比 来 实现 。 

色相 对 比 是 给 人 们 带 来 色彩 知觉 的 重要 手段 。 如 家 庭 中 的 陈设 ,日 用 品 ,网 页 设计 、 公 
共 场 所 的 标志 ,招贴 ,以 及 步行 街 上 穿着 五 颜 六 色 服装 的 人 群 ,都 越 来 越 多 地 展现 了 色相 对 
比 的 魅力 。 

2. 色相 对 比 的 强 弱 关系 

色相 对 比 的 强 弱 决 定 于 色相 环 上 的 位 置 ,距离 越 近 , 对 比较 弱 色 相 越 类 似 , 距 离 越 远 ,对 
比 越 强 ,这 是 色相 对 比 的 规律 。 从 色相 环 上 看 ,任何 一 个 色相 都 可 以 为 主 色 ,和 其 他 色相 组 
成 同类 色 对 比 、 类 似 色 对 比 、 邻 近 色 对 比 、 对 比 色 对 比 、 互 补 色 对 比 的 色彩 关系 ,如 图 3-75 


所 示 。 
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图 3-75 


(1) 同类 色 对 比 

在 24 色相 环 上 任 选 一 色 ,与 这 个 色相 相距 15" 以 内 的 色相 对 比 叫做 同类 色 对 比 , 如 黄 与 
REUS . 黄 与 绿 味 黄 、 蓝 与 紫 味 蓝 、 绿 与 蓝 味 绿 、 红 与 紫 味 红 等 。 同 类 色 对 比 , 显 得 单纯 、 柔 
和 、 微 妙 ,因为 同类 色 对 比 是 最 弱 的 对 比 , 如 图 3-76 和 图 3-77 所 示 。 
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图 3-76 


(2) 类 似 色 对 比 

在 24 色相 环 上 任 选 一 色 ,与 这 个 色相 距离 60" 以 内 的 色相 对 比 叫做 类 似 色 对 比 , 如 玫瑰 
红 、 大 红 、 朱 红 、 黄 绿 、 蓝 绿 。 类 似 色 对 比 的 特点 是 统一 、 和 谐 , 比 同类 色 对 比 效果 要 丰富 ,如 
图 3-78 和 图 3-79 所 示 。 


图 3-79 


(3) 邻近 色 对 比 

在 24 色相 环 上 任 选 一 色 ,与 这 个 色相 距 907 ,或 者 彼此 相隔 五 六 个 数位 的 两 色 , 叫 做 邻 
近 色 对 比 ,如 黄 与 橙 . 黄 与 绿 \ 蓝 与 紫 、 紫 红 与 紫 、 蓝 绿 与 绿 等 。 邻 近 色 对 比 的 特点 是 ,色彩 对 
比 愈 明 快 愈 鲜艳 ,可 以 组 成 活泼 .艳丽 的 色调 。 网 页 设计 、 服 装 设计 和 室内 设计 等 常常 采用 
这 种 配色 手法 ,如 图 3-80 和 图 3-81 所 示 。 

(4) 对 比 色 对 比 

在 24 色相 环 上 任 选 一 色 ,与 此 色相 隔 120" 左 右 的 三 色 对 比 , 叫 做 对 比 色 对 比 , 它 属 色相 
的 中 度 对 比 , 如 黄 与 蓝 紫 、 绿 与 紫红 、 红 与 黄 绿 、 紫 与 绿 黄 、 蓝 与 黄 橙 等 。 对 比 色 对 比 的 特点 
Ж: 比邻 近 色 对 比 更 鲜艳 .更 强烈 ,更 饱满 丰富 ,容易 使 人 兴奋 .激动 ,但 也 容易 使 视觉 疲劳 ， 
给 人 不 安定 的 感觉 ,这 是 表现 运动 感 的 最 佳 配色 。 如 改变 对 比 色相 的 明度 与 纯度 ,可 构成 许 
多 审美 价值 很 高 的 以 色相 对 比 为 主 的 色调 ,如 图 3-82 和 图 3-83 所 示 。 
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图 3-80 


图 3-82 


(5) 互补 色 对 比 

在 24 色相 环 上 任 选 一 色 ,与 这 个 色相 间隔 180" 的 两 个 色相 比 , 均 为 互补 色 对 比 , 它 是 色 
相 中 最 强烈 的 对 比 关系 ,如 红 与 绿 、 黄 与 紫 、 蓝 与 橙 等 。 互补 色 对 比 的 特点 是 : 比 对 比 色 对 
比 更 完整 .更 丰富 、 更 强烈 更 富有 刺激 性 ,有 着 极 强 的 视觉 冲击 力 和 热烈 感 。 因 为 互补 色 处 
在 色相 环 直径 两 端的 位 置 上 ,互补 色 对 比较 适合 远 距 离 的 设计 ,使 人 在 短 短 的 时 间 内 获得 一 
种 色彩 印象 ,如 街头 广告 ,标志 、 橱 窗 .商品 包装 等 互补 色 的 运用 在 色相 对 比 中 最 难处 理 , 它 
需要 较 高 的 配色 技能 ,如 图 3-84 和 图 3-85 所 示 。 


图 3-84 图 3-85 
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3.3.3 纯度 对 比 


1. 纯度 对 比 的 特点 

因 色 彩 纯 度 的 高 低 而 形成 的 色彩 鲜 浊 对 比 叫做 纯度 对 比 。 这 种 对 比 既 可 以 是 一 种 色相 
纯度 鲜 浊 对 比 ,也 可 以 是 不 同色 相间 的 纯度 对 比 。 纯 度 对 比 的 特点 是 增强 用 色 的 鲜艳 感 , 也 
增强 了 配色 的 艳丽 、 活 泼 、 注 目 及 感情 倾向 。 但 纯度 对 比 弱 时 ,往往 会 出 现 配 色 的 粉 . 灰 、 脏 、 

2. 纯度 调子 对 比 关系 

每 个 颜色 都 有 自己 的 纯度 值 ,要 想 规 定 一 个 划分 高 .中 、 低 纯度 的 统一 标准 是 很 困难 的 。 
重 塞 尔 的 色 立 体 表 示 红 色 的 纯度 为 14( 最 高 值 ), 而 蓝 绿 的 纯度 最 低 仅 为 6, 所 以 ,很 难 确定 
一 个 统一 的 标准 。 现 将 各 色相 的 纯度 分 为 12 级 , 表 3-2 所 示 为 色相 、 明 度 、 纯 度 值 。 


表 3-2 
色相 明度 纯度 色相 明度 纯度 色相 明度 纯度 
红 4 14 绿 5 8 紫 4 12 
а 6 12 蓝 绿 5 6 品 红 4 12 
黄 8 12 蓝 4 8 
黄 绿 7 10 ЖЖ 3 12 


色彩 纯度 差别 的 大 小 决定 对 比 的 强 弱 , 纯 度 对 比 的 视觉 刺激 量 明显 低 于 明度 对 比 约 
3 一 4 级 ,相当 于 一 个 明度 对 比 的 清晰 度 , 如 果 按 照 12 个 纯度 级 别 进行 划分 , 则 相差 8 级 为 
强 对 比 ,相差 5 一 7 级 为 中 对 比 ,相差 4 级 以 内 为 弱 对 比 。 若 高 纯度 面积 占 70% 即 可 构成 高 
纯度 基调 ,叫做 高 纯 调 ; 若 中 纯度 面积 占 70% 即 可 构成 中 纯度 基调 ,叫做 中 调 ; 若 低 纯度 面 
Жин 70% 即 可 构成 低 纯 度 基 调 , 叫 做 沁 调 。 

纯度 强 对 比 : 色彩 对 比 效果 十 分 鲜明 , 鲜 的 更 鲜 , 溃 的 更 当 。 色 彩 显得 饱和 、 生 动 、 活 
泌 。 容 易 引 起 人 们 的 注意 。 

纯度 中 对 比 : 色彩 具有 统一 、 和 谐 而 有 变化 的 特点 。 色 彩 个 性 比较 鲜明 突出 ,但 程度 适 
中 、 柔 和 。 

纯度 弱 对 比 : 纯度 差别 极 小 ,形成 弱 对 比 关 系 。 视 觉 效 果 弱 ,形象 的 清晰 度 低 ,色彩 容 
易 显得 灰 、 脏 。 图 3-86 所 示 为 纯度 强 对 比 ,图 3-87 所 示 为 纯度 中 对 比 ,图 3-88 所 示 为 纯度 
弱 对 比 ,图 3-89 所 示 为 纯度 中 对 比 。 


图 3-86 
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图 3-88 图 3-89 


3.4 无 色 系 颜色 与 有 色 系 颜色 的 搭配 应 用 


3.4.1 黑 , 白 、 灰 的 作用 


黑色 是 色彩 中 最 暗 的 色 , 白 色 是 色彩 中 最 亮 的 色 ,因为 占据 了 色彩 明暗 当中 的 极端 , 因 
此 被 称 为 极 色 , 又 因为 不 存在 色彩 的 冷暖 倾向 ,被 称 为 无 彩色 、 中 性 色 , 还 因为 具有 分 隔 色 彩 
的 作用 , 故 又 被 称 为 调和 色 。 

在 色彩 表现 中 ,纯色 相 显 示 着 原始 色彩 的 光辉 。 在 很 多 特定 的 环境 中 ,彩色 之 间 的 
强烈 对 比 ,造成 眼花 练 乱 的 躁动 感 ,但 是 ,一 旦 将 黑 、 白 二 色 加 入 其 中 , 原 有 的 过 于 融洽 、 
画面 形象 不 清 或 过 于 鲜艳 的 色相 使 人 焦躁 不 安 的 感觉 顿时 就 会 被 稳定 、 被 化 解 。 色 彩 之 
间 会 达成 条 理 清晰 的 色彩 效果 。 所 以 ,我们 用 黑白 分 割 夯 面 ,可 以 调和 色彩 的 对 比 关 系 。 
在 中 国 传统 的 园林 建筑 、 戏 曲 行头 .京剧 脸谱 、 书 画 艺术 中 发 挥 了 极致 的 作用 ,特别 是 泌 
BR . 泼 彩 的 山水 画 艺术 更 是 匠心 独 运 。 图 3-90 所 示 为 图 案 设 计 中 的 黑白 调和 ,图 3-91 所 
示 为 黑白 灰 调 和 。 


图 3-90 图 3-91 
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3.4.2 黑色 白色 对 色彩 的 分 隔 作用 


由 于 色彩 三 要 素 之 间 的 影响 变换 ,有 彩色 之 间 既 互相 排斥 又 互相 吸引 关联 ,在 对 比 
的 同时 产生 了 互补 调和 ,在 调和 的 过 程 中 又 要 体现 彼此 的 对 比 关系 。 而 黑白 色 却 具 有 
一 种 独立 的 ,不 易 被 侵犯 的 特殊 效果 。 从 明暗 的 角度 去 审视 物质 世界 ,有 光 才 有 色 ,而 
黑色 .白色 对 色彩 的 明度 起 着 决定 性 的 作用 。 因 此 黑白 色 能 够 对 其 他 色彩 进行 有 效 
的 划 界 和 分 割 。 用 黑色 或 者 白色 将 纷 杂 的 色 块 组 合 分 割 后 ,每 块 颜色 的 特征 就 会 完全 
地 显示 出 来 。 将 三 个 相等 的 正方 形 各 自 等 分 为 九 块 小 正方 形 ,把 9 种 纯度 和 明度 都 十 
分 接近 、 色 相对 比 又 比较 柔和 的 颜色 , 按 相应 的 位 置 分 别 涂 在 三 个 正方 形 的 小 方 格 内 。 
此 时 ,由 于 各 方块 内 的 小 色 块 之 间 纯 度 相似 ,明度 接近 ,所 以 界线 不 清 , 色 彩 互相 影响 
干扰 ,有 一 种 不 安定 感 ,三 个 方形 构图 呈现 完全 一 样 的 模糊 色调 。 现 在 保留 一 个 构图 ， 
将 余下 的 两 个 构图 ,一 个 用 黑色 线条 、 一 个 用 白色 线条 仍 按 小 方块 进行 分 制 。 这 时 比 
较 三 个 构图 我 们 不 难 发 现 ,无 论 是 用 黑色 线条 分 割 还 是 用 白色 线条 分 割 的 构成 ,每 一 
块 颜色 与 其 他 的 颜色 界线 都 变 得 非常 分 明 , 色 彩 也 变 得 更 纯净 ,增加 了 颜色 的 独立 性 
效果 ,形状 也 变 得 明确 稳定 了 。 图 3-92 所 示 为 原 构图 ,图 3-93 所 示 为 白色 分 制 效果 ， 
图 3-94 所 示 为 黑色 分 割 效 果 。 


3-92 图 3-93 3-94 


3.4.3 色彩 的 暗 化 与 淡化 


用 黑色 和 白色 调和 色彩 ,会 给 某 一 种 纯度 的 色相 带 来 非常 丰富 的 明度 层次 和 纯度 层次 
的 变化 。 但 同时 在 一 定 程度 上 也 改变 了 该 色相 的 冷暖 性 质 。 黑 、 白 、 灰 在 色调 组 合 是 不 可 缺 
少 的 ,是 达到 色彩 和 谐 的 最 佳 “ 调 和 剂 "。 它们 虽 无 色相 ,但 都 在 配色 中 有 着 极其 重要 的 意 
义 , 水 不 会 被 流行 色 所 淘汰 。 

添加 白色 会 使 一 个 色相 的 明度 不 断 提高 ,但 同时 也 降低 了 该 色相 的 纯度 ,如 果 继续 添 
加 ,最 终 该 色相 会 完全 消失 在 无 限 的 白色 世界 中 。 与 之 相反 ,黑色 的 不 断 加 入 必然 会 降低 纯 
色 的 明度 ,还 会 使 原来 纯净 的 色相 逐渐 变 灰 、 变 暗 直至 完全 隐没 在 黑暗 之 中 。 黑 白 二 色 本 身 
属于 无 彩色 , 当 它 们 与 暖色 相 混合 后 ,可 以 使 其 变 冷 ;如 果 和 冷色 相 混合 后 ,又 能 使 冷色 变 
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暖 。 例 如 : 灰 蓝 色 与 淡 蓝 色 都 比 纯 蓝 色 混 浊 , 草 绿色 与 橄榄 绿色 都 比 黄 绿色 偏 冷 等 。 除 此 
之 外 ,纯色 与 黑白 两 色相 混 后 在 一 定 程度 上 也 改变 了 原 有 的 色彩 相貌 ,比如 蓝 色 加 入 白色 混 
合 后 显 紫 味 ,黄色 加 入 黑色 混合 后 呈 绿 味 ,如 图 3-95 和 图 3-96 所 示 。 


图 3-95 3-96 


3.5 色彩 调和 


调和 ,从 美学 的 角度 来 讲 , 就 是 “多 样 的 统一 ”。 在 此 需要 强调 的 是 ,调和 绝 不 是 仅仅 指 
色彩 的 类 似 、 统 一 ,更 不 是 单调 的 一 致 。 在 调和 的 概念 中 ,对 比 也 是 一 个 不 可 缺少 的 组 成 部 
分 ;没有 对 比 ,就 没有 所 谓 的 调和 ,调和 与 对 比 是 相互 依存 互相 制 约 、 对 立 统一 的 两 个 因素 。 
色彩 的 对 比 是 绝对 的 ,调和 是 相对 的 ,对 比 是 目的 ,调和 是 手段 。 

色彩 配色 是 否 调和 ,一 方面 取决 于 视觉 生理 条 件 是 否 得 到 满足 , 它 在 画面 中 表现 为 色彩 
的 构图 面积 \ 形 状 、 位 置 . 肌 理 等 多 方面 组 织 是 否 * 恰 当 ”; 另 一 方面 表现 为 人 的 内 心愿 望 是 
否 得 到 满足 。 


3.5.1 类 似 调和 


从 人 的 视觉 生理 条 件 上 讲 ,色彩 的 调和 可 以 概括 为 两 个 方面 , 即 类 似 调 和 与 对 比 调 和 。 
类 似 调 和 是 将 色彩 三 要 素 中 的 某 一 种 或 两 种 要 素 做 同一 或 近似 的 组 合 ,用 以 寻求 色彩 的 统 
一 感 ,这 是 一 种 简单 而 便利 的 调和 方法 。 

1. 同一 调和 

同一 调和 是 在 色彩 三 属性 中 将 其 中 某 一 种 属性 进行 完全 相同 的 调和 ,使 色彩 的 组 合 关 
系 中 含有 一 个 方面 的 同一 要 素 , 变 化 其 他 两 个 要 素 , 称 其 为 单 性 同一 调和 。 在 三 属性 中 将 两 
个 要 素 完 全 同一 ,变化 另 一 个 要 素 称 为 双 性 同一 调和 。 

(1) 单 性 同一 调和 

同一 色相 ,变化 明度 和 纯度 ;同一 明度 ,变化 色相 和 纯度 ;同一 纯度 ,变化 明度 和 
色相 。 

同一 色相 时 ,明度 反差 和 纯度 反差 最 好 拉 开 一 些 . 为 了 避免 单调 感 ,也 可 以 使 画面 雅 观 ， 
同时 富 于 变化 。 在 同一 明度 时 ,应 注意 避免 色相 过 于 单调 的 画面 .单调 的 色相 会 使 画面 的 色 
彩 模糊 不 清 。 这 时 的 纯度 也 不 适合 太 接近 ,尤其 是 低 纯度 色 。 在 同一 纯度 时 ,色彩 变化 效果 
明显 ,高 纯度 色 同 一 画面 中 ,色相 感 十 分 鲜明 ,应 注意 控制 各 自 的 色 面积 关系 , 求 取 色 面积 量 
的 平衡 效果 。 图 3-97 所 示 为 同一 色相 不 同 明度 和 纯度 的 调和 ,图 3-98 所 示 为 同一 纯度 不 
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同 明度 和 色相 的 调和 。 


图 3-97 图 3-98 


(2) 双 性 同一 调和 

同一 色相 和 明度 ,变化 纯度 ;同一 明度 和 纯度 ,变化 色相 ;同一 色相 和 纯度 ,变化 明度 。 
当选 择 同 一 色相 和 明度 时 ,应 注意 尽 可 能 拉 大 纯度 反差 ,避免 画面 产生 模糊 感觉 。 这 种 配色 
效果 从 整体 上 看 对 比较 弱 , 会 形成 柔和 腾 胱 的 色彩 效果 。 

当选 择 同一 明度 和 纯度 时 ,应 注意 到 它 很 可 能 形成 一 种 很 多 色 都 含 灰色 的 效果 ,因为 黄 
色 、 紫 色 明 度 反 差 很 大 ,同时 必然 要 变化 为 灰 黄色 与 灰 紫 色 , 此 时 应 注重 控制 色相 调子 ,确定 
以 暖 调 还 是 冷 调 为 主导 ,不 可 形成 不 冷 不 暖 的 花 调 子 。 当 同一 色相 和 纯度 时 ,应 注意 到 这 种 
调 的 配色 选择 性 很 小 ,其 效果 极为 统一 、 含 蓄 , 一 定 要 加 大 明暗 反差 。 如 红色 加 白色 ,红色 加 
黑色 .红色 加 灰色 等 , 它 有 些 像 单 色 所 形成 的 素描 关系 。 

无 论 是 哪 种 变化 ,同一 调和 都 是 高 度 求 统一 的 方法 ,其 中 双 性 同一 调和 比 单 性 同一 调和 
更 为 柔和 。 图 3-99 和 图 3-100 所 示 为 双 性 调和 。 


图 3-99 图 3-100 


2. 近似 调和 
在 色彩 三 属性 中 ,使 某 一 种 或 两 种 要 素 近 似 变化 ,其 要 素 称 为 近似 调和 。 近 似 与 同一 的 
概念 有 所 不 同 ,近似 中 的 对 比 因素 拉 大 了 ,变化 的 丰富 性 也 相应 地 加 强 了 ,但 它 还 是 一 种 统 
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一 感 为 主导 的 配色 原则 。 它 包括 : 近似 明度 变化 色相 、 纯 度 ;近似 色 相 变 化 明度 、 纯 度 ;近似 
纯度 变化 明度 、 色 相 ; 近 似 明度 、 纯 度 变 化 色相 ;近似 明度 、 色 相 变 化 纯度 ;近似 色相 、 纯 度 变 
化 明度 。 无 论 是 哪 种 近似 调和 的 方法 ,都 应 本 着 统一 中 в 

求 变化 的 基本 原则 。 调 配 出 适合 其 产品 的 色彩 效果 ,如 
图 3-101 所 示 。 


3.5.2 对 比 调和 


对 比 调和 是 一 种 在 色彩 对 比 中 寻求 某 一 方面 统一 
感 的 调和 方式 ,也 可 以 将 其 看 成 是 在 变化 中 求 统一 的 设 
计 方 式 。 它 是 在 不 同 要 素 的 组 合 中 ,以 彼此 对 比 而 产生 
强烈 的 ,富有 变化 的 视觉 平衡 为 和 谐 基 础 的 。 

以 强调 变化 而 组 合 的 色彩 和 谐 关 系 称 为 对 比 调和 。 
在 对 比 调 和 中 ,色彩 三 要 素 大 多 数 情况 下 都 处 于 对 比 状态 中 ,因此 色彩 感觉 更 富 于 生动 活 
iz ER RC Н 

CD 在 对 比 强烈 的 二 色 中 ,加 入 相应 的 等 差 等 比 的 渐变 色 系 列 , 改 变 原先 的 色彩 结构 ， 
使 对 比 变 得 柔和 ,达到 色彩 调和 的 效果 。 

(2) 在 对 比 色 中 混入 同一 种 色 , 达 到 色彩 调和 的 效果 。 

(3) 改变 面积 及 形状 ,达到 色彩 调和 的 效果 。 

(4) 在 色相 环 上 以 几何 形 来 确定 某 种 变化 位 置 ,其 中 包括 : 

三 角形 调和 又 称 为 三 角 调 和 ,其 中 又 分 为 等 腰 三 角形 调和 、 等 边 三 角形 调和 不 等 边 
三 角形 调和 。 四 角 、 五 角 、 六 角形 调和 等 多 角 调 和 关系 , 随 着 角 数 增加 ,色彩 对 比 变 化 
越 加 丰富 ,为 了 使 之 统一 和 谐 ,应 灵活 运用 各 种 秩序 的 排列 关系 。 色 相 环 上 的 多 角形 
变化 ,能 产生 非常 丰富 的 色彩 调和 变化 ,运用 得 当 , 会 取得 很 好 的 色彩 效果 ,如 图 3-102 
和 图 3-103 所 示 。 


图 3-101 


rmm) 


图 3-102 
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3.6 色彩 在 网 页 设计 中 的 应 用 


3.6.1 网 页 与 色彩 


网 页 是 网 站 在 计算 机 上 提供 给 人 们 浏览 的 一 个 信息 窗口 ,是 集 音频 、 视 频 \ 文 字 传输 为 
一 体 的 多 媒体 媒介 的 大 众 传媒 界面 。 在 实际 使 用 中 ,网 页 可 分 为 一 级 网 页 ` 二 级 网 页 ER 
网 页 …… 图 3-104 所 示 为 一 级 网 页 设计 ,图 3-105 所 示 为 二 级 网 页 设计 ,图 3-106 所 示 为 三 


图 3-106 


21 世纪 是 视觉 语言 为 中 心 的 时 代 , 网 页 设计 的 色彩 运用 直接 影响 到 网 页 的 整体 视觉 效 
果 。 从 色彩 学 的 角度 来 审视 网 页 的 设计 ,复杂 的 网 页 界面 ,色彩 运用 得 越 简洁 、 越 完整 ,对 人 
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们 的 吸引 力 就 越 强 。 好 的 网 页 设计 , 正 是 遵循 了 色彩 运用 的 规律 ,在 人 们 浏览 网 页 的 时 候 ， 
优美 的 色彩 往往 是 吸引 人 们 关注 的 重要 因素 之 一 。 


3.6.2 ”对比 与 协调 


网 页 版 面 中 的 色彩 ,首先 要 强调 对 比 。 色 彩 对 比如 果 不 到 位 ,整个 页 面 就 会 显得 灰暗 ， 
没有 生气 。 在 对 比 的 同时 还 要 注意 和 谐 , 没 有 和 谐 的 色彩 对 比 是 对 色彩 运用 不 成 熟 的 表现 。 
色彩 对 比 与 和 谐 的 方法 很 多 ,例如 : 色彩 三 要 素 的 对 比 ; 类 似 调 和 构成 ,色彩 的 调和 与 面积 
形状 的 关系 、 色 彩 的 调和 与 视觉 生理 平衡 等 。 

1. 统一 与 类 似 调和 构成 设计 

同色 相 不 同 明度 、 纯 度 的 调和 , 同 明度 不 同色 相 、 纯 度 的 调和 , 同 纯度 不 同色 相 、 明 度 的 
调和 ;有 彩色 与 无 彩色 的 调和 , 非 彩色 调和 。 以 色彩 明度 、 色 相 、 纯 度 为 主 的 色彩 构成 对 比 。 
如 图 3-107 所 示 为 以 高 明 调 为 主 的 网 页 设计 ,图 3-108 所 示 为 以 色相 为 主 调 的 网 页 设计 ， 
图 3-109 所 示 为 以 鲜 浊 为 主 调 的 纯度 网 页 设计 。 
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图 3-109 


2. 色彩 的 调和 与 面积 .形状 .肌理 的 关系 

色彩 总 是 通过 一 定 的 面积 \ 形 状 和 肌理 表现 出 来 的 。 也 就 是 说 ,一 块 颜色 或 一 笔 颜 色 ， 
总 是 伴随 着 面积 大 小 、 形 的 轮廓 与 方向 、 色 的 分 布 等 因素 被 我 们 所 认识 ,因此 ,研究 色彩 调 
和 ,就 一 定 离 不 开 与 之 相关 的 这 些 要 素 。 下 面 对 它 们 一 一 分 析 , 从 而 使 配色 设计 更 完美 。 
图 3-110 所 示 为 相同 的 色彩 .形状 ,不 同 面积 的 大 小 所 得 的 视觉 效果 。 图 3-111 和 图 3-112 


所 示 为 色彩 肌理 的 视觉 效果 。 


图 3-110 


图 3-111 
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在 网 页 设计 时 既 要 考虑 到 页 面 整 体 风 格 的 协调 统一 ,还 要 兼顾 将 要 添加 到 网 页 中 的 内 
容 形式 ,而 且 网 页 中 的 内 容 应 当 清 晰 适宜 浏览 ,所 以 不 要 使 用 太 粹 眼 的 颜色 或 太 腾 胱 的 效 
果 , 除 非 有 特殊 的 需要 。 
作品 欣赏 : 
(1) 图 3-113 所 示 网 页 背景 是 以 黑色 为 主 的 色彩 搭配 ,是 为 了 让 人 们 在 观看 电影 时 眼 
睛 不 容易 疲劳 。 


3-113 


(2) 图 3-114 所 示 的 网 页 中 温 声 的 玫瑰 花 和 浪漫 的 粉红 色 ,体现 出 空间 主人 乐观 ,快乐 


的 生活 态度 。 


(3) 图 3-115 所 示 的 网 页 中 生动 形象 的 卡丁车 动画 有 突出 游戏 的 主题 作用 , 令 人 好 奇 、 


向 往 。 
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ERR вас гас яи mea зао nat < SERE] š, 


图 3115 


习题 3 


3-1 网 页 与 色彩 设计 的 关系 。 
HR: 完成 文字 稿 1500 FERA , 谈 谈 对 网 页 与 色彩 设计 关系 的 理解 和 认识 。 
目的 : 提高 学 生 对 色彩 的 认识 。 加 深 对 色彩 在 现实 生活 中 重要 性 的 理解 。 
3-2 ”网 页 版 式 设计 训练 一 一 自 拟 网 站 主题 ,进行 网 页 版 式 设 计 与 创意 练习 。 
要 求 : 设计 2 一 4 个 网 页 页 面 , 分 析 版 式 类 型 。 
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本 章 知 识 点 

。 标题 栏 的 设计 和 制作 

+ 导航 条 的 设计 和 制作 

。 广告 栏 的 应 用 

。 网 页 背景 的 制作 和 应 用 
° 页 眉 和 页 脚 的 设计 

本 章 学 习 目标 

。 掌握 标题 栏 的 设计 和 制作 
° 掌握 导航 条 的 设计 和 制作 
° 了解 广告 栏 的 应 用 

。 掌握 网 页 背景 的 制作 和 应 用 
° 掌握 页 眉 和 页 脚 的 设计 


我 们 在 互联 网 上 浏览 网 页 时 ,各 种 各 样 风格 不 同 的 网 页 给 我 们 带 来 了 美好 的 视觉 感受 。 
但 无 论 网 页 是 何 种 类 型 、 何 种 风格 ,设计 得 精妙 还 是 平庸 ,从 网 页 的 构成 要 素来 讲 , 基 本 上 都 
是 一 致 的 。 本 章 主要 介绍 网 页 各 组 成 部 分 的 设计 要 点 ,并 以 * 绿 之 韵 环保 网 站 ”为 例 介 绍 网 
页 各 组 成 部 分 的 设计 和 制作 。 


4.1 网 页 标题 栏 的 设计 和 制作 


4.1.1 网 页 组 成 简介 


常见 的 网 页 一 般 包 括 标题 .导航 以 及 页 面 内 容 三 大 部 分 ,如 图 4-1 所 示 。 

标题 : 网 页 标题 是 对 一 个 网 页 的 高 度 概括 ,一 般 来 说 ,网 站 首页 的 标题 就 是 网 站 的 正式 
名 称 。 通 常 包括 网 站 标志 、 网 站 名 称 两 部 分 。 

导航 : 网 站 导航 (navigation) 是 指 通过 一 定 的 技术 手段 ,为 网 站 的 访问 者 提供 一 定 的 途 
径 , 使 其 可 以 方便 地 访问 到 所 需 的 内 容 。 网 站 导航 的 基本 作用 是 为 了 让 用 户 在 浏览 网 站 过 
程 中 不 致 迷失 ,并 且 可 以 方便 地 回 到 网 站 首页 以 及 其 他 相关 内 容 的 页 面 。 

页 面 内 容 : 文字 与 图 片 是 构成 一 个 网 页 的 两 个 最 基本 的 元 素 。 可 以 简单 地 理解 为 
文字 ,就 是 网 页 的 内 容 ; 图 片 , 就 是 网 页 的 衣服 。 除 此 之 外 ,网 页 的 元 素 还 包括 动画 、 音 乐 , 程 
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标题 
导航 | 导航 | 导航 | 导航 [导航 
网 页 内 容 
标题 
导航 | 网 页 内 容 
导 
导航 
导航 
图 4-1 


序 , 等 等 。 网 页 的 另 一 个 重要 组 成 部 分 是 超 链接 , 它 是 一 种 允许 我 们 同 其 他 网 页 或 站 点 之 间 
进行 链接 的 元 素 。 各 个 网 页 链接 在 一 起 后 ,才能 真正 构成 一 个 网 站 。 


4.1.2. 网 页 标题 栏 的 设计 与 制作 


1. 新 建文 件 

启动 Photoshop CS3, 选 择 “ 文 件 ”>“ 新 建 "命令 ,设置 文件 大 小 为 1004X600( 宽 度 X 高 
度 ) ,分 辨 率 为 72 像素 /英寸 (dpi) ,色彩 模式 为 RGB, 背景 颜色 为 白色 ,文件 名 称 为 “ 绿 之 韵 
首页 ”, 如 图 4-2 所 示 。 


2. 创建 图 层 

单 击 图 层面 板 右 下 角 的 创建 新 图 层 按钮 国 ,如 图 4-3 所 示 。 创 建 “图 层 1”, 双 击 * 图 层 
1” 文 字 , 修 改 为 “标题 背景 ", 如 图 4-4 所 示 。 当 前 选中 哪个 图 层 , 单 击 创建 新 图 层 按钮 后 ,新 
图 层 就 会 出 现在 当前 选中 的 图 层 之 上 ,可 以 用 鼠标 拖 动 图 层 来 改变 图 层 的 层次 顺序 ,或 按 
Ctrl HRES Ctrl 十 键 来 调整 当前 图 层 的 顺序 。 

3. 用 钢笔 工具 勾画 标题 背景 区 域 

使 用 工具 箱 中 的 钢笔 工具 名 ,设置 属性 为 路 径 方式 ,如 图 4-5 Bron. 
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图 44 


EEC Q r Q 


图 4—5 


按 图 4-6 所 示 的 锚 点 连续 单 击 鼠 标 , 用 钢笔 工具 勾勒 出 标题 背景 的 基本 形状 ,到 最 后 一 
个 节点 时 单 击 第 一 个 锚 点 ,封闭 路 径 。 使 用 路 径 选 择 工具 单 击 路 径 上 的 锚 点 ,然后 按 住 鼠标 
拖 忠 ,可 以 对 路 径 进 行 调整 , 拖 动 控制 柄 使 曲线 变 得 圆滑 。 
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4. 填充 颜色 

一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ,显得 单调 ,乏味 ;但 是 也 不 可 能 将 多 种 颜色 运用 
到 网 站 中 ,显得 轻浮 、 花 哨 。 一 个 网 站 必须 有 一 种 或 两 种 主题 色 ,适量 搭配 小 部 分 对 比 色 ( 补 
色 系 ) 的 色彩 ,达到 谐 调 的 效果 。 由 于 是 环保 网 站 ,所 以 我 们 用 绿色 作为 主 色 调 来 完成 这 个 
首页 设计 。 

使 用 路 径 面 板 将 路 径 作为 选区 载 入 工具 按钮 BJ. 把 第 3 步 的 路 径 转换 为 选区 (或 按 
Ctrl+Enter 键 ) ,选择 渐变 工具 ,设置 线性 渐变 为 深 绿色 到 淡 绿 色 的 渐变 ,对 标题 背景 选区 
填充 背景 色 , 如 图 4-7 所 示 ,作为 网 站 首页 的 标题 栏 。 


4.1.3 Logo 的 设计 与 制作 


传统 网 页 的 标题 栏 主要 放置 网 站 标志 (Logo) \ 快 速 导 航 、 顶 部 Banner 广告 或 者 站 内 搜 


一 一 一 一 一 一 一 一 一 一 第 4 章 网 页 各 组 成 部 分 的 设计 和 制作 


图 4-7 
索 等 常用 元 素 , 如 图 4-8 所 示 。 有 些 个 性 化 网 页 也 把 收藏 \ 设 为 首页 、 站 内 搜索 等 功能 放 在 
标题 栏 的 区 域 。 
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图 48 


Logo 是 指 那些 造型 单纯 ,意义 明确 的 统一 、 标 准 的 视觉 符号 ,一 般 是 网 站 的 文字 名 称 、 图 
案 记 号 或 者 两 者 相 结合 的 一 种 设计 。 标 志 具 有 象征 功能 、 识 别 功能 ,是 网 站 的 形象 ,特征 、 信 誉 
和 文化 的 浓缩 ,一 个 设计 杰出 的 符合 网 站 理念 的 标志 ,会 增加 网 站 的 信赖 感 和 权威 感 ,在 社会 
大 众 的 心目 中 , 它 就 是 网 站 或 者 某 个 品牌 的 代表 。 一 个 好 的 Logo 往往 会 反映 网 站 及 制作 者 的 
某 些 信息 ,特别 是 对 于 商业 网 站 。 我 们 可 以 从 中 基本 了 解 到 这 个 网 站 的 类 型 ,或 者 内 容 。 

标志 不 仅仅 是 一 个 图 形 或 文字 的 组 合 , 它 是 依据 企业 的 构成 结构 行业 类 别 ,经 营 理念 ， 
并 充分 考虑 标志 接触 的 对 象 和 应 用 环境 ,为 企业 制定 的 标准 视觉 符号 。 在 设计 之 前 ,首先 要 
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对 企业 做 全 面 深入 的 了 解 ,包括 经 营 战略 .市场 分 析 , 以 及 企业 最 高 领导 人 员 的 基本 意愿 ,这 
些 都 是 标志 设计 开发 的 重要 依据 。 并 从 中 挖掘 一 些 设计 要 素 。 

有 了 对 企业 的 全 面 了 解 和 对 设计 要 素 的 充分 掌握 ,可 以 从 不 同 的 角度 和 方向 进行 设计 。 
充分 发 挥 想象 ,用 不 同 的 表现 方式 ,将 设计 要 素 融 入 设计 中 ,标志 要 达到 含义 深刻 、 特 征明 
显 、 造 型 大 气 、 结 构 稳 重 、 色 彩 搭配 能 适合 企业 ,避免 流 于 俗套 或 大 众 化 。 经 过 讨论 分 析 , 从 
若干 个 方案 中 找到 最 适合 企业 的 标志 。 在 细节 上 再 加 以 修改 .完善 ,最 终 确 定 网 站 的 Logo, 

如 图 4-9 一 图 4-11 所 示 网 站 的 Logo。 
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图 4-10 
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图 4-11 


Logo 有 静态 和 动态 两 种 。 静 态 Logo 可 以 用 Photoshop, Firework, Coreldraw 等 软件 
设计 ;动态 Logo 可 以 用 Imageready, Flash, Easy GIF Animator 等 软件 设计 。 本 书 中 主要 
讲解 静态 Logo。 

下 面 继续 完成 “ 绿 之 前 网 站 首页 "标题 栏 中 Logo 的 制作 。 

(1) 使 用 自 定 义 形 状 工具 贺 ,如 图 4-12 所 示 ; 选 择 形状 列表 中 的 
叶片 形状 $, 设 计 形 状 图 层 样 式 贺 ,填充 颜色 为 深 绿色 ,如 图 4-13 所 A e EERI u 

示 ; 绘 制 绿叶 形状 ,并 运用 图 层 阴 影 样 式 添 加 阴影 ,利用 自由 变形 工具 
(Ctrl 十 T) 旋 转 叶片 的 角度 ,完成 后 Logo 如 图 4-14 所 示 。 
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图 4-12 


图 4-14 


(2) 使 用 文字 工具 ,图 层 描 边 样式 ,添加 网 站 标题 信息 、 网 址 URL 信息 ,如 图 4-15 
所 示 。 
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图 4-15 


4.1.4 网 页 标题 栏 Banner 的 设计 与 制作 


网 页 的 Banner, 其 实 也 是 一 种 广告 条 。 主 要 用 于 传递 一 些 信 息 ,起 到 广 而 告 之 的 目的 。 
比如 ,网 站 要 开展 的 活动 、 网 站 的 新 动向 、 商 品 信息 等 。 

1. Banner 的 设计 原则 

由 于 网 站 Banner 的 作用 是 向 访问 者 传递 信息 , 随 着 网 络 的 发 展 ,Banner 已 经 成 为 投放 
网 络 广告 的 重要 途径 ,也 是 一 些 以 广告 营利 的 网 站 的 重要 手段 。 因 此 ,在 设计 的 时 候 应 该 注 
意 以 下 几 点 : 

使 用 鲜明 的 色彩 ,吸引 访问 者 的 注意 。 在 色彩 的 选用 上 ,更 多 地 选用 红 、 橙 、 蓝 、 绿 、 黄 等 
鲜艳 的 颜色 ,如 图 4-16 所 示 。 


图 4-16 


2. Banner 上 的 文字 ,具有 很 强 的 号 召 力 

日 常生 活 中 的 广告 ,就 是 要 促使 更 多 的 人 去 购买 相应 的 产品 ,在 消费 者 心目 中 树立 产品 
的 形象 。 广 告 语 对 这 个 作用 起 到 相当 的 推动 作用 。 例 如 我 们 经 常 听 到 的 “nothing is 
impossible" “省 集 咖啡 ,味道 好 极 了 ”等 。 网 站 Banner 也 同样 具备 这 样 的 特点 ,所 以 要 让 
Banner 中 的 文字 给 予 访 问 者 很 强 的 号 召 力 、 吸 引力 ,如 图 4-17 所 示 。 
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图 4-17 


图 4-18 
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4.2 导航 条 的 设计 与 制作 


4.2.1 网 页 导航 条 简介 


网 站 导航 是 指 通过 一 定 的 技术 手段 ,为 网 站 的 访问 者 提供 一 定 的 途径 ,使 其 可 以 方便 地 
访问 到 所 需 的 内 容 。 网 站 导航 的 基本 作用 是 为 了 让 用 户 在 浏览 网 站 过 程 中 不 致 迷失 ,并且 
可 以 方便 地 回 到 网 站 首页 以 及 其 他 相关 内 容 的 页 面 。 

一 个 网 站 的 导航 菜单 是 整个 网 站 布局 中 最 重要 的 部 分 之 一 , 当 用 户 访问 你 的 网 站 时 , 导 
航 菜单 起 到 了 举足轻重 的 作用 ,设计 有 个 性 、 摆 放 科 学 的 导航 菜单 ,可 以 更 加 清晰 地 引导 用 
户 的 每 一 步 站 内 操作 ,并 向 用 户 直观 地 传达 网 站 内 容 的 特点 。 让 访问 者 了 解 在 用 户 网 站 中 
我 在 哪里 我 去 过 哪里 .我 可 以 去 哪里 。 

1. 我 在 哪里 

对 于 那些 层次 结构 比较 多 的 网 站 ,为 访问 者 提供 我 在 哪里 的 导航 非常 重要 。 这 样 既 可 
以 防止 访问 者 在 站 点 中 迷路 ,又 可 以 使 其 记 住 访 问 过 的 位 置 。 例 如 图 4-19 所 示 的 网 页 导 
航 , 当 前 正在 浏览 的 栏目 以 黄色 显示 。 
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图 4-19 


2. 我 去 过 哪里 

在 访问 网 站 的 时 候 , 如 果 想 要 知道 自己 去 过 哪些 页 面 ,可 以 使 用 浏览 器 的 返回 按 
钮 。 但 是 在 浏览 网 页 的 时 候 , 会 发 现 这 种 方法 不 易于 我 们 了 解 网 站 的 结构 与 层次 。 我 
们 可 以 使 用 编程 的 方法 很 好 地 解决 这 个 问题 。 如 图 4-20 所 示 的 网 页 导航 ,通过 编程 的 
方式 记录 之 前 访问 过 的 页 面 ,并 按 浏览 先后 顺序 显示 :“ 您 的 位 置 : 虎 扑 МВА > МВА 
球员 二 埃 迪 - 豪 斯 ”。 
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图 4-20 
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3. 我 可 以 去 哪里 

给 出 与 访问 者 目前 浏览 内 容 相关 的 导航 ( 见 图 4-21) ,那么 这 个 导 
航 在 功能 设计 上 ,可 以 说 无 可 挑剔 。 所 以 ,在 网 页 设计 时 ,结合 全 网 页 
的 内 容 \ 访 问 者 的 特点 ,可 以 灵活 设计 导航 , 尽 可 以 让 访问 者 了 解 在 这 
个 网 站 中 : 我 在 哪里 \ 我 去 过 哪里 ,我 可 以 去 哪里 。 


4.2.2 导航 条 的 设计 要 求 


为 了 将 网 站 信息 更 有 效 地 传递 给 用 户 ,导航 条 设计 一 定 要 简洁 、 
直观 、 明 确 。 

一 般 来 说 ,要 注意 以 下 几 点 : 

(1) 导航 条 的 色彩 要 与 网 站 的 整体 相 融 合 , 在 颜色 上 通常 不 要 求 
1$ Logo, Banner 那样 色彩 鲜明 。 

(2) 根据 访问 者 的 浏览 次 序 和 网 页 内 容 的 安排 ,放置 在 网 页 显眼 
的 位 置 。 放 置 在 网 页 的 正 上 方 或 正 下 方 , 可 以 很 好 地 展示 精心 设计 的 
导航 条 ;放置 在 网 页 的 左 侧 或 右 侧 ,可 以 展示 列表 导航 。 


(3) 导航 层次 清晰 ,能 够 简单 明了 地 反映 访问 者 浏览 的 层次 结构 。 越 来 越 多 的 设计 精 
美的 网 页 导航 不 再 拘泥 于 规则 的 导航 ,而 是 把 导航 融入 到 整个 网 页 背景 中 去 ,给 浏览 者 导航 
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的 同时 ,也 带 来 了 更 强 的 视觉 冲击 ,如 图 4-22、 图 4-23 和 图 4-24 所 示 网 站 的 导航 。 
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4.2.3 导航 条 的 设计 


根据 网 站 首页 版 式 设计 、 网 页 栏目 .网 站 内 容 、 网 站 风格 等 各 方面 的 考虑 ,设计 导航 条 的 
样式 、 位 置 颜色。 如 根据 本 章 的 环保 网 站 实例 ,可 以 设计 如 图 4-25 所 示 的 导航 。 


图 4-25 


4.2.4 导航 的 位 置 


为 了 使 网 站 的 整体 风格 一 致 ,可 以 把 导航 信息 以 相同 的 形式 固定 在 不 同 页 面 的 相同 位 
置 ,这 些 位 置 可 以 是 页 面 的 上 部 .下 部 , 左 侧 , 右 侧 和 中 部 。 页 面 中 间 一 般 放置 主体 内 容 , 所 
以 页 面 实际 上 有 4 个 区 域 比较 适合 放置 导航 元 素 , 即 项 部. 左 侧 、 右 侧 和 下 部 。 放 在 下 部 需 
要 将 网 页 控制 在 一 屏 以 内 。 

像 图 4-25 所 示 的 例子 ,就 把 导航 放 在 页 面 的 左 侧 ,页 面 的 右 侧 放置 网 页 的 主体 内 容 。 


4.2.5 导航 的 方向 


导航 的 方向 是 指导 航 文字 的 排列 方式 。 有 横 排 导航 、 竖 排 导航 和 倾斜 导航 三 种 情况 ,也 
有 少数 不 规则 的 导航 。 导 航 方向 很 大 程度 上 影响 了 网 页 平面 的 空间 分 割 与 版 式 风格 ,运用 
得 体能 起 到 事半功倍 的 效果 。 

横 排 导航 占用 页 面 空 间 最 少 ,经 常 使 用 在 信息 量 比较 大 的 门户 网 站 ,资讯 网 站 中 ,显得 
很 大 气 。 因 此 ,不 少 企业 网 站 也 采用 了 横 排 导航 。 

坚 排 导航 占用 空间 较 多 ,通常 位 于 页 面 的 左 侧 , 比 较 适 合 阅读 者 的 视觉 心理 。 坚 排 导航 
像 传统 的 菜单 ,符合 使 用 规律 。 也 有 不 少 网 站 把 传统 的 竖 排 导航 改进 成 折 释 式 的 树 形 导 航 ， 
以 节省 空间 。 

倾斜 导航 打破 了 网 页 由 于 表格 排版 造成 的 横向 与 竖 向 的 格局 ,拥有 很 强 的 视觉 冲击 力 。 
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但 是 由 于 它 的 个 性 特征 太 鲜 明 ,不 适用 于 信息 量 丰 富 的 网 站 。 通 常 在 一 些 个 人 网 站 上 比较 
常用 。 

网 页 可 以 通过 色彩 变化 ,字号 大 小 、 多 级 子 栏目 、 动 画 效果 等 方法 来 告诉 浏览 者 现在 所 
处 的 位 置 , 增 加 页 面 的 辨识 性 。 通 常 ,可 以 在 导航 中 加 入 图 片 . 背 景色 、 栏 目 线 等 装饰 元 素 ， 
以 突出 其 视觉 效果 。 


4.3 广告 栏 的 应 用 


4.3.1 网 页 广告 的 定义 


网 页 广告 栏 是 指 用 条 状 的 图 像 和 文字 内 容 显示 出 广告 信息 的 一 种 广告 类 型 。 这 种 
广告 即 是 对 网 页 页 面 的 一 种 点 级 ,也 是 用 超 链接 的 方式 引导 用 户 访问 某 一 页 面 的 有 效 
工具 。 

相信 大 家 在 访问 营利 性 网 站 ,如 搜索 引擎 .新闻 网 站 、 媒 体 网 站 、 聊 天 网 站 .网 上 电子 商 
务 .专业 服务 供应 商 等 网 站 时 ,都 看 到 了 一 个 接 一 个 的 华丽 的 广告 条 。 网 页 广告 条 可 以 使 一 
些 企业 通过 丰富 的 视觉 效果 传递 各 种 信息 (包括 企业 的 徽标. 产品 活动 内 容 等 ) 来 得 到 较 好 
的 广告 效应 ,还 可 以 使 网 站 的 运营 商 通过 广告 的 征集 来 获得 一 定 的 收益 。 如 图 4-26 ~ 
图 4-28 所 示 常 用 网 页 广告 条 的 大 小 通常 为 480X60 像素 .120X240 像素 或 125X125 像素 。 
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4.3.2. 网 页 广告 条 的 种 类 和 特点 


网 页 广告 条 有 三 种 : 静态 效果 网 页 广告 条 \ 动 画 效果 网 页 广告 条 和 交互 式 网 页 广告 条 。 


静态 效果 网 页 广告 条 ,是 指 没 有 动画 效果 的 ,仅仅 是 通过 一 幅 固定 的 图 像 提供 可 以 跳 转 
到 目标 页 面 的 超 链 接 ,如 图 4-29 所 示 。 
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动画 效果 的 广告 条 ,依次 显示 多 个 帧 的 图 像 以 达到 动画 效果 。 有 GIF 和 SWF 两 种 格 


式 , 如 图 4-30 
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交互 式 网 页 广告 条 ,根据 用 户 的 操作 ,相应 地 显示 出 不 同 内 容 的 交互 式 网 页 广告 条 ,可 
以 实现 与 用 户 的 交流 。 使 用 Flash 制作 ,如 图 4-31 所 示 。 
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现在 的 网 页 广告 条 更 多 以 动画 、 互 动 的 形式 为 主 ,采用 Imageready, Flash 制作 为 主流 ， 
由 于 其 卓越 的 视觉 表现 和 互动 效果 ,已 经 被 众多 网 站 所 运用 。 

网 页 动画 广告 具有 它 独 有 的 特点 ,得 到 众多 的 网 页 设计 者 和 浏览 用 户 的 喜爱 。 以 较 小 
的 面积 吸引 较 多 的 注意 力 ,视觉 冲击 力 极 强 。 对 于 追求 点 击 率 为 宗旨 的 广告 商 来 说 ,无 疑 是 
最 好 的 选择 。 使 信息 从 二 维 空间 扩展 到 三 维 空间 ,为 信息 的 展示 提供 了 一 个 延伸 的 平台 。 
比 静 态 的 图 像 文 字 更 具 吸 引力 。 生 动 形象 ,有 些 辅 以 适当 的 音乐 ,大 大 加 强 表现 的 真实 性 、 
生动 性 和 感染 力 , 加 强 宣传 的 效果 。 


4.3.3 网 页 广告 条 的 标准 


当 为 设计 网 页 广告 条 准备 好 一 切 之 后 ,首先 应 该 知道 什么 样 的 才能 够 称 得 上 是 优秀 的 
网 页 广告 条 设计 作品 。 简 单 地 说 ,无 非 是 把 想 要 传递 的 信息 通过 文字 和 图 像 完美 结合 ,以 最 
恰当 的 方式 体现 给 用 户 , 才 算 是 个 成 功 的 网 络 广告 条 。 

下 面 是 制作 网 络 广告 条 应 注意 的 问题 : 

。 不 要 太 简 单 ! 问题 与 图 像 的 协调 

如 果 一 个 网 页 广告 条 是 仅 由 文字 构成 ,那么 绝 大 多 数 用 户 连 理 都 不 理 , 只 有 结合 了 适当 
的 图 像 , 才 能 够 吸引 更 多 用 户 的 目光 。 

。 不 要 等 待 ! 一 一 适当 的 广告 时 间 

一 次 动画 的 播放 时 间 通 常 应 在 5 一 8 秒 的 时 间 内 ,过 于 漫长 的 动画 过 程 会 使 用 户 兴趣 
全 无 。 
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° 不 要 太 多 的 文字 ! 一 一 广告 语 一 定 要 言 简 意 凡 

网 页 广告 条 中 显示 的 文字 应 该 尽量 简短 ,又 能 充分 表现 出 需要 传递 的 信息 。 只 有 这 样 ， 
才能 够 使 用 户 更 易于 接收 你 所 传递 的 信息 。 

° 不 要 太 复 杂 ! 

要 在 有 限 的 广告 条 画面 范围 内 提供 更 多 信息 ,这 种 想法 是 错误 的 ! 主题 鲜明 才 是 一 个 
网 页 广告 条 必须 遵守 的 一 项 原则 。 

* 文件 尽 可 能 小 ! 

效果 要 尽 可 能 好 ,但 是 文件 要 尽 可 能 地 小 。 

除 此 之 外 ,为 了 使 得 网 页 广告 条 能 收 到 更 好 的 广告 效果 。 我 们 可 以 采用 扩大 广告 效果 
的 几 种 方法 。 

° 网 页 广告 条 的 位 置 尽 可 能 是 网 页 页 面 的 中 央 上 方 : 因为 打开 了 一 个 页 面 之 后 用 户 
通常 都 会 自 上 而 下 地 进行 浏览 ,所 以 网 页 广告 条 的 最 佳 发 布 位 置 是 中 央 上 方 。 其 
次 ,因为 窗口 的 滚动 条 通常 位 于 画面 右 侧 ,所 以 相对 于 画面 左 侧 而 言 , 右 侧 的 广告 效 
果 会 更 好 。 
广告 条 越 大 ,广告 条 的 点 击 率 越 高 : 根据 日 本 广告 协会 对 网 页 广告 条 的 调查 结果 表 
明 , 当 一 个 网 页 广告 条 的 大 小 扩大 为 2 倍 时 ,该 网 页 广告 条 的 点 击 率 就 会 增加 到 原 
来 的 1.6 倍 ; 当 网 页 广告 条 的 大 小 扩大 为 3 倍 时 ,该 网 页 广告 条 的 点 击 率 就 会 增加 
到 原来 的 2.5 倍 ; 当 网 页 广告 条 的 大 小 缩小 为 原来 的 一 半 时 ,该 网 页 广告 条 的 点 击 
率 就 会 减少 到 原来 的 四 分 之 一 。 
广告 条 的 颜色 越 鲜明 ,点击 率 就 越 高 : 网 页 广告 条 所 使 用 的 主 色 调 也 会 在 很 大 程度 
上 影响 网 页 广告 的 点 击 率 。 据 调查 , 蓝 色 系 、 黄 色 系 \ 绿 色 系 对 用 户 的 视觉 刺激 比较 
大 , 且 会 给 和 人 一 种 安详 与 宁静 的 感觉 。 而 白色 系 、 红 色 系 、 黑 色 系 会 给 用 户 带 来 急 
躁 、 压 抑 等 感觉 。 
信息 要 简短 吻 懂 ,风格 要 连贯 统一 : 对 一 个 网 页 广告 条 来 说 ,信息 的 简短 与 风格 的 
统一 是 至 关 重 要 的 。 即 使 你 在 网 页 广告 条 中 显示 了 一 长 串 文字 ,没有 用 户 会 耐心 读 
完 所 有 文字 ,反而 会 让 他 们 感到 反感 。 

*“ 免 费 *"“ 赠 送 ” 是 人 们 永远 喜欢 的 字眼 :“ 免 费 *"“ 赠 送 ” 等 字眼 永远 都 能 吸引 大 部 
分 人 的 目光 ,这 些 文字 至 少 能 为 广告 条 增加 10%—40% 0 S Ж. 

网 页 广告 条 要 尽 可 能 使 用 动画 效果 : 一 个 变化 中 的 物体 总 是 更 吸引 人 注意 ,所 以 动 
画 效 果 也 是 一 个 网 页 广告 条 成 败 的 关键 所 在 。 

多 使 用 邀请 、 劝 诱 语气 的 文字 :“ 现 在 就 来 参加 吧 ”、“ 请 即 参加 ”等 具有 邀请 、 规 功 语 
气 的 文字 内 容 总 是 能 够 吸引 更 多 人 的 ,因为 见 到 这 些 文字 之 后 会 引发 很 多 人 无 意识 
的 动作 。 合 理 地 使 用 这 种 预期 的 文字 ,能 提高 1196 — 15 6 AAR R. 

疑问 语气 的 文字 也 能 提高 点 击 率 : 在 浏览 网 页 时 ,很 少 有 人 会 对 网 页 广告 条 中 的 文 
字 进 行 深 入 的 分 析 , 所 以 当 他 见 到 一 段 疑问 形式 的 文字 ,或 许 会 吸引 他 去 进行 解答 。 
疑问 语气 的 文字 也 能 够 为 网 页 广告 提高 16% 左 右 的 点 击 率 。 

尽 可 能 减少 网 页 广告 条 文件 容量 的 大 小 : 打开 一 个 网 页 页 面 , 最 先 显示 的 广告 条 一 
定 是 文件 容量 相对 较 小 的 一 个 。 所 以 ,为 了 能 更 早 地 吸引 用 户 的 注意 力 , 应 该 尽量 
减少 广告 条 文件 的 大 小 。 不 然 很 有 可 能 在 你 的 广告 条 显示 之 前 ,用 户 已 经 跳 转 到 另 
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一 个 页 面 。 
° 在 广告 条 下 方 显示 文字 链接 : 在 网 页 广告 条 下 方 显示 文字 链接 , 当 用 户 的 目光 引 向 
广告 条 之 后 ,文字 内 容 也 自然 映 人 眼帘。 


4.3.4 网 页 广告 的 应 用 


网 页 广告 的 制作 目的 在 于 向 更 多 用 户 传递 活动 信息 、 吸 引 更 多 用 户 参与 活动 、 得 到 更 好 
的 广告 效应 \ 获 得 更 多 的 用 户 信息 。 

网 页 广告 具有 一 定 的 时 限 性 ,因为 大 部 分 广告 条 都 是 为 了 某 个 具体 的 活动 而 设计 的 ,在 
活动 结束 之 后 广告 条 可 能 会 随 之 删除 或 替换 。 所 以 ,作为 一 个 成 功 的 网 页 广告 条 ,一 定 要 在 
最 短 的 时 间 内 得 到 最 佳 的 广告 效果 。 

网 页 广告 条 的 主体 通常 是 当今 流行 的 人 物 或 事件 ,因为 每 一 项 活动 的 策划 都 会 考虑 到 
各 种 潮流 ,所 以 在 广告 条 的 设计 上 ,同样 要 遵循 这 种 规则 。 例 如 ,在 世界杯” 期间 ,大 部 分 网 
页 广告 都 用 了 “世界 杯 ” 主 题 ,以 吸引 更 多 人 的 注意 。 设 计 、 制 作 、 应 用 广告 条 时 ,也 应 该 时 刻 
留意 社会 中 被 认为 时 尚 和 流行 的 各 种 信息 ,通过 巧妙 的 设计 将 其 融入 到 网 页 设计 中 去 。 

因为 每 个 季节 都 会 给 入 们 不 同 的 感受 ,所 以 很 多 公司 的 网 页 也 会 随 着 季节 的 变化 而 进 
行 改版 。 很 大 程度 上 ,这 是 为 了 给 用 户 传达 欣欣 向 荣 的 ,不 断 进步 的 企业 形象 。 网 页 广告 的 
制作 也 一 样 。 例 如 , 当 活 动 的 时 间 是 在 “春节 ”“ 除 夕 "“ 情 人 节 ” 等 特殊 的 日 子 , 一 定 要 在 每 
个 节日 的 特殊 氛围 中 将 活动 的 信息 传递 给 用 户 ,这样 用 户 更 易于 接受 。 


4.4 网 页 背景 的 制作 和 应 用 


4.4.1 网 页 背景 简介 


网 页 中 的 背景 设计 是 相当 重要 的 ,尤其 是 对 于 个 人 主页 来 说 ,一 个 主页 的 背景 就 相当 于 
一 个 房间 里 的 墙壁 地 板 一 样 ,好 的 背景 不 但 能 影响 访问 者 对 网 页 内 容 的 接受 程度 ,还 能 影响 
访问 者 对 整个 网 站 的 印象 。 如 果 你 经 常 注意 别人 的 网 站 ,你 应 该 会 发 现在 不 同 的 网 站 上 ,其 
至 同一 个 网 站 的 不 同 页 面 上 ,都 会 有 各 式 各 样 的 不 同 的 背景 设计 。 


4.4.2. 网 页 背景 的 种 类 和 特点 


1. 颜色 背景 

颜色 背景 的 设计 是 最 为 简单 的 ,但 同时 也 是 最 为 常用 和 最 为 重要 的 ,因为 相对 于 图 片 背 
景 来 说 , 它 有 无 与 伦比 的 显示 速度 上 的 优势 ,如 图 4-32 所 示 。 

颜色 背景 虽然 比较 简单 ,但 也 有 不 少 地 方 需 要 注意 ,如 要 根据 不 同 的 页 面 内 容 设 计 背 景 
颜色 的 冷暖 状态 ,要 根据 页 面 的 编排 设计 背景 颜色 与 页 面 内容 的 最 佳 视觉 搭配 等 。 

实现 的 HTML 语法 为 : 


<body bgcolor= "color"» 
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2. 沙 纹 背景 

沙 纹 背景 其 实 属于 图 片 背景 的 范畴 , 它 的 主要 特点 是 整个 页 面 的 背景 可 以 看 做 是 局 部 
背景 的 反复 重 排 ( 见 图 4-33) ,在 这 类 背景 中 以 沙 纹 状 的 背景 最 为 常见 ,所 以 将 其 统称 为 沙 
纹 背景 ,如 图 4-33 所 示 。 


图 4-33 


初学 网 页 制作 可 能 都 有 这 样 的 经 历 , 当 试 图 把 自己 的 照片 作为 页 面 的 背景 时 , 却 发 现 浏 
览 器 上 显示 出 来 的 不 仅仅 是 一 张 照片 ,而 是 同一 照片 在 水 平和 竖 直方 向 上 的 重复 排列 。 这 
就 是 浏览 器 处 理 图 片 背景 时 的 方法 ,利用 这 一 规律 我 们 可 以 用 一 小 块 图 片 作为 页 面 背景 ,让 
它 自 动 在 页 面 上 重复 排列 , 铺 满 整个 页 面 ,从 而 使 网 页 的 体积 大 大 减 小 。 

沙 纹 背 景 的 原理 和 实现 方法 ,就 是 找 一 个 小 的 图 片 , 越 小 越 好 ,但 注意 要 使 最 后 的 背景 
看 起 来 要 像 一 个 整体 ,而 不 是 若干 图 片 的 堆砌 。 
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实现 的 HTML 语法 为 : 

<body background= "picture"> 

3. 条 状 背景 

条 状 背景 与 沙 纹 背景 是 比较 相似 的 , 它 适 用 于 页 面 背 景 在 水 平 或 竖 直 方向 上 看 是 重复 


排列 的 ,而 在 另 一 方向 上 看 则 是 没有 规律 的 。 它 也 是 利用 浏览 器 对 图 片 背 景 的 自动 重复 排 
列 ,与 沙 纹 背 景 所 不 同 的 是 它 只 让 图 片 在 一 个 方向 上 重复 排列 ,如 图 4-34 所 示 。 


图 4-34 


以 在 竖 直方 向 上 排列 为 例 , 首 先 用 图 像 处 理 软 件 做 一 个 从 左 到 右 为 蓝 白 渐变 的 水 平 条 
状 图 片 ,其 长 度 与 页 面 的 宽度 相当 。 将 其 设 为 页 面 背 景 ,经 浏览 器 显示 后 ,就 成 为 整个 页 面 
从 左 到 右 蓝 白 渐变 的 分 栏 颜色 背景 。 当 然 , 也 可 以 用 类 似 的 方法 实现 条 状 背景 在 水 平方 向 
上 的 重复 排列 。 

4. 照片 背景 

把 自己 或 朋友 的 照片 作为 页 面 的 背景 让 大 家 看 到 ,是 有 点 令 人 激动 的 事情 ,但 浏览 器 对 
图 片 的 自动 重复 排列 却 使 这 一 愿望 难以 实现 。 使 用 CSS 样式 表 , 可 以 解决 这 个 问题 。 这 
FÉ ,在 网 页 真 面 中 ,就 可 以 看 到 照片 位 于 页 面 的 正中 间 ,而 且 在 拉动 浏览 器 窗口 的 滚动 条 时 ， 
照片 仍然 位 于 页 面 的 正中 间 而 不 随 页 面 内 容 一 起 滚动 。 如 你 对 照片 位 于 页 面 的 正中 间 不 满 
意 ,也 可 以 通过 CSS 样式 表 , 随 意 地 调整 它 在 页 面 中 的 位 置 ,如 图 4-35 所 示 。 

5. 复合 背景 

综合 使 用 颜色 背景 和 照片 背景 ,会 看 到 照片 浮 于 颜色 背景 之 上 ,二 者 能 够 同时 正常 地 显 
示 出 来 ,如 图 4-36 所 示 。 

6. 局 部 背景 

也 可 以 把 上 述 的 几 种 背景 应 用 在 表格 的 单元 格 或 图 层 上 ,局 部 改变 网 页 的 背景 。 


4.4.3 网 页 背景 的 设计 


网 页 背景 决定 了 网 站 的 主题 ,网 页 背景 也 在 一 定 程 度 上 决定 了 网 站 的 视觉 效果 。 随 着 
网 页 设计 的 演化 ,网 页 风格 也 不 断 变化 ,其 中 ,尤其 以 网 页 背景 的 变化 最 为 显著 。 网 页 背景 
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&cotonoha 


图 4-36 


直接 决定 着 网 页 的 主题 。 总 的 来 说 ,网 页 背景 普遍 综合 运用 到 上 述 的 各 种 传统 背景 ,采用 分 
层 背 景 的 方法 设计 ,如 图 4-37 所 示 。 


4.4.4 网 页 分 层 背 景 的 设计 要 点 


主 背 景 ,也 叫 底层 背景 ,经 常 是 图 片 、 图 案 、 材 质 或 者 其 他 图 形 元 素 。 

内 容 背 景 , 主 背 景 上 面 的 称 为 内 容 背 景 .是 文本 、 图 案 以 及 其 他 基本 数据 或 信息 的 背景 。 

主 背景 与 内 容 背 景 采 用 分 层 的 方式 , 层 琶 在 一 起 ,构成 色彩 丰富 、 构 图 精美 的 画面 。 

例如 ,如 图 4-38 所 示 的 网 页 背景 : 主 背景 采用 纹理 背景 ,内 容 在 主 背景 上 。 图 片 内 容 
用 白色 边框 与 主 背景 拉 开 层次 ,文字 内 容 使 用 对 比 强烈 的 颜色 直接 放 在 图 片 内 容 上 。 

在 图 4-39 所 示 的 网 页 中 , 主 背景 是 一 张大 的 图 片 ,内容 在 背景 的 最 顶层 。 内 容 背 景 采 
用 实心 背景 ,而 网 页 头 部 内 容 背 景 采 用 透明 背景 ,网 页 底部 内 容 背 景 采用 半 透 明 背 景 。 
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One day, however, the balance Gf “thestar force" on the strange planet 
was disrupted by an unidentified counter force, 


图 4-38 


图 4-39 
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图 4-40 所 示 网 页 采用 纯色 作为 主 背景 ,文字 、 图 片 内 容 直 接 放 在 主 背景 上 ,运用 图 层 阴 
影 样式 ,纹理 边框 ,把 内 容 与 主 背景 的 层次 拉 开 。 
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图 4-40 


图 4-41 所 示 网 页 主 背景 采用 纯色 带 纸 纹 背景 ,内 容 背 景 为 渐变 色 , 利 用 Photoshop 图 
层 样 式 制作 立体 效果 。 人 允许 一 些 内 容 融 入 背景 区 域 或 者 一 些 图 案 融 入 内 容 区 域 ,能 收 到 很 
好 的 视觉 效果 ,如 图 4-42 所 示 。 
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网 页 页 眉 指 的 是 页 眉 顶 端的 部 分 。 有 的 网 页 划分 比较 明显 ,有 的 页 面 没有 明确 区 分 或 
者 没有 页 眉 。 页 眉 的 风格 一 般 和 整体 页 面 风格 一 致 ,富有 个 性 特色 的 页 眉 有 着 和 网 站 Logo 
一 样 的 标识 作用 。 页 眉 的 位 置 注意 力 较 高 ,大 多 数 网 站 创建 者 在 此 设置 网 站 的 宗旨 宣传 口 
号 .广告 语 等 ,有 的 设计 成 广告 位 ,如 图 4-43 所 示 。 

| 你 好， 欢迎 光临 当当 同 [登录 | 注册 ] 


[ed 


音乐 | 影视 | 运动 | 服饰 | 家 居 
小 说 青春 | 历史 me 


SJL жЕ 
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图 4-43 


4.5.2. 网 页 页 脚 简介 


网 页 页 脚 是 页 面 的 底部 。 通 常用 来 标注 站 点 所 属 公司 (社团 ) 的 名 称 、 地 址 、 网 站 版 权 信 
息 、 邮 件 地 址 等 ,如 图 4-44 所 示 。 使 浏览 者 能 够 从 中 了 解 到 该 站 点 所 有 者 的 一 些 基本 情况 。 


公司 简介 | WEST | AREE | SARA | 交易 条 款 


Copyright (C) 当当 网 2004-2009, AIL Rights Reserved ө исне EGMBETGNU жане 


图 444 


第 4 章 ”网 页 各 组 成 部 分 的 设计 和 制作 


4.5.3 页 眉 、 页 脚 的 设计 


结合 网 页 整体 版 面 设计 ,灵活 运用 各 种 方法 设计 网 页 背景 ,也 可 以 把 网 页 的 页 眉 、 页 脚 
设计 得 美丽 、 独 特 , 打 破 一 般 的 古板 的 形式 ,让 人 了 眼前 一 亮 ,如 图 4-45 至 图 4-48 所 展示 的 网 
页 的 页 眉 、 页 脚 。 
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习题 4 


A 网 页 通常 由 哪 几 部 分 组 成 ? 

42 网 页 导航 条 有 什么 作用 ? 

4-3 导航 条 的 设计 有 什么 要 求 ? 

4-4 网 页 广告 有 哪 几 种 ? 

4-5 举例 说 明 网 页 背景 的 种 类 和 特点 。 

4-6 请 上 网 浏览 不 同 的 网 页 ,并 指出 网 页 的 各 个 组 成 部 分 。 
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第 5 章 网 页 中 按钮 的 制作 及 应 用 


本 章 知识 点 

。 按钮 与 网 页 的 关系 

。 文字 按钮 的 制作 

。 图 形 按钮 的 制作 

。 动态 按钮 的 制作 

本 章 学 习 目标 

。 了 解 按钮 与 网 页 的 关系 
° 掌握 各 种 按钮 的 制作 


按钮 和 导航 是 网 站 设计 不 可 缺少 的 基础 元 素 之 一 ,导航 不 仅仅 是 信息 结构 的 基础 分 类 
也 是 浏览 网 站 的 路 标 。 导 航 是 引 人 注 目的 ,浏览 者 进入 网 站 ,首先 会 寻找 导航 条 。 根 据 导航 
菜单 ,直观 地 了 解 网 站 储备 了 哪些 分 类 信息 以 及 分 类 的 方式 ,以 便 判 断 是 否 需要 进入 网 站 内 
部 ,查找 需要 的 资料 。 

而 按钮 作为 页 面 的 重要 视觉 元 素 ,放置 在 明显 、 易 找 、 易 读 的 区 域 是 必要 的 ,让 浏览 者 进 
入 网 站 时 第 一 时 间 就 可 以 看 到 它们 。 


5.1 按钮 与 网 页 的 关系 


按钮 是 网 页 中 必 不 可 少 的 基本 控制 部 件 , 在 各 种 网 页 中 都 少不了 按钮 的 参与 。 因 此 在 
网 页 设计 中 的 按钮 设计 也 是 十 分 重要 的 ,通过 它 可 以 完成 很 多 任务 ,以 下 将 详细 讲解 按钮 在 
网 页 中 的 作用 以 及 与 网 页 的 关系 。 

网 页 按钮 一 般 可 以 分 为 动态 按钮 和 静态 按钮 两 种 。 它 们 出 现 的 方式 是 多 种 多 样 的 ,可 
以 是 文字 ,可 以 是 抽象 或 具象 的 图 形 ,可 以 是 普通 的 图 片 , 也 可 以 是 其 他 网 站 和 公司 的 产品 
标识 或 Logo。 

1. 文字 按钮 

文字 按钮 在 网 页 的 布局 中 可 以 达到 线 或 点 构成 元 素 的 作用 。 无 论 是 哪 种 构成 元 素 , 它 
所 起 的 都 是 平衡 画面 的 作用 ,简单 地 说 ,就 是 平衡 画面 的 黑白 关系 、 疏 密 关系 、 色 彩 关系 等 。 
文字 横向 或 是 纵向 的 排列 ,使 文字 组 合成 为 一 个 线性 的 元 素 ,或 是 一 个 点 的 元 素 参 与 到 与 网 
页 的 整体 构图 中 ,图 5-1 为 未 添加 文字 前 的 导航 栏 ,图 5-2 为 添加 文字 后 的 效果 ,图 5-3 为 文 
字 按 钮 在 网 页 中 的 应 用 。 
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一 图 片 按钮 


图 5-3 


文字 按钮 还 有 个 好 处 是 可 以 对 页 面 进行 搜索 引擎 优化 ,文字 链接 对 应 的 网 址 出 现 的 次 
数 越 多 ,在 搜索 引擎 上 排名 就 越 靠 前 ,所 以 很 多 设计 师 喜 欢 用 文字 链接 。 

2. 图 片 按钮 

图 片 形式 的 按钮 广泛 应 用 在 商业 网 站 或 个 人 网 站 中 。 一 般 用 于 展示 产品 图 片 或 是 新 闻 
索引 ,也 可 以 体现 出 网 页 个 性 的 一 面 。 在 网 页 的 布局 中 ,可 以 起 到 * 面 ?或 "点 "构成 元 素 的 作 
用 ,如 图 5-4 所 示 。 其 中 图 片 所 占 位 置 起 到 了 * 面 "的 作用 ,使 画面 的 黑白 关系 得 到 了 调和 。 
图 片 是 产品 的 图 片 ,连接 后 是 单独 的 产品 介绍 ,这 种 手法 也 是 现代 商业 网 站 中 较为 常用 的 。 
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图 5-4 


网 页 设计 与 网 站 规划 
如 图 5-5 所 示 , 图 片 按钮 是 以 "点 ”的 形式 出 现在 网 页 中 的 ,按钮 在 网 页 中 起 到 了 平衡 页 
面 构图 关系 的 作用 。 图 片 是 一 张 产品 图 片 ,主要 是 引导 一 个 产品 的 说 明 。 
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图 5-5 


在 许多 网 页 中 ,为 了 突出 个 性 ,往往 会 使 用 一 些 特殊 的 图 片 作为 按钮 ,如 图 5-6 和 图 5-7 
所 示 ,在 这 里 就 不 一 一 介绍 了 。 
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3. 图 形 按钮 

图 形 按钮 也 是 网 页 中 较为 常见 的 一 种 按钮 。 与 文字 按钮 类 似 , 它 在 网 页 布局 中 起 到 的 
作用 也 是 “点 ”或 “ 线 ” 的 作用 。 图 形 按钮 的 样式 较 多 ,在 这 里 把 它 分 成 由 网 页 框架 派生 而 出 
的 图 形 按 钮 和 相对 独立 的 图 形 按 钮 两 种 。 
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图 片 按钮 
图 5-7 
CD. 由 网 页 框架 派生 出 的 图 形 按钮 


这 是 网 页 中 最 为 常见 的 一 中 按钮 样式 , 它 一 般 与 网 页 的 框架 联系 在 一 起 ,成 为 一 个 整 
体 ,如 图 5-8 至 图 5-10 所 示 。 
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在 制作 这 种 按钮 时 ,注意 按钮 的 颜色 要 与 框架 的 颜色 统一 和 谐 , 使 其 能 够 融入 网 页 的 框 
架 之 中 。 在 形式 上 要 符合 网 页 整体 的 规划 ,这 种 依附 于 框架 的 按钮 往往 是 由 框架 的 形式 所 
决定 的 。 所 以 在 制作 之 前 要 充分 考虑 框架 与 按钮 的 造型 关系 是 否 统一 。 

(2) 相对 独立 的 图 形 按钮 

这 也 是 网 页 中 常见 的 按钮 样式 。 但 与 上 一 种 不 同 , 它 脱离 了 框架 的 依附 而 独立 存 
在 ,这 种 按钮 制作 起 来 更 为 灵活 ,更 能 发 挥 设计 者 的 想象 力 。 它 的 造型 一 般 说 来 不 受 
限制 ,可 以 是 椭圆 形 矩形、 三 角形 ,更 可 以 是 一 些 不 规则 的 形状 ,如 图 5-11 和 图 5-12 
所 示 o 
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图 5-11 


在 图 形 按钮 中 ,也 有 一 些 较 难 区 分 的 按钮 样式 。 这 些 按钮 样式 无 疑 会 给 网 页 带 来 另类 
的 气息 ,更 张扬 了 网 页 的 个 性 ,如 图 5-13 和 图 5-14 所 示 。 

4. 标识 性 按钮 

标识 性 按钮 是 商业 网 站 中 经 常 使 用 的 一 中 按钮 样式 ,应 用 十 分 普遍 。 尤 其 是 在 公司 网 
页 宣传 .产品 宣传 等 情况 下 应 用 较 多 。 标 识 性 按钮 一 般 是 一 个 公司 的 标识 ,也 可 是 网 站 的 
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图 5-313 


图 5-14 


Logo、 产 品 的 图 标 等 ,如 图 5-15 所 示 。 它 的 出 现 完全 是 为 了 宣传 ,所 以 对 整个 网 页 形象 所 起 
的 作用 不 大 ,一 般 会 以 * 点 ”的 形式 出 现在 网 页 之 中 ,起 到 丰富 网 页 的 作用 。 在 应 用 时 ,要 注 
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意 它 的 出 现 尽量 不 要 过 于 花哨 ,所 占 面积 不 能 过 大 , 若 面积 过 大 会 影响 整个 页 面 的 布局 
风格 。 


图 5-15 


观察 图 5-16 和 图 5-17 所 示 的 两 张 网 页 ,第 一 个 构图 、 颜 色 尚 可 ,但 是 由 于 标识 按钮 过 
大 ,以 至 于 网 页 没有 重点 。 第 二 个 虽然 内 容 一 样 ,但 效果 明显 要 好 一 些 ,因此 各 个 部 分 的 主 
从 关系 也 是 很 重要 的 ,如 果 没 有 特殊 需要 ,按钮 一 般 在 构图 中 的 体积 应 避免 过 大 ,起 到 点 级 
的 作用 即 可 。 
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图 5-16 В 5-17 


在 有 些 网 站 的 设计 中 ,把 标题 性 的 按钮 放置 在 统一 的 地 方 ,这 种 方法 既 可 以 突出 按 
钮 ,又 可 以 合理 分 割 网 页 的 构图 ,如 图 5-18 所 示 。 该 网 页 把 所 有 的 标题 按钮 放 在 了 网 页 
的 右 侧 ,不仅 规划 出 了 按钮 的 区 域 , 使 按钮 更 突出 ,又 合理 安排 了 画面 :不 至 于 画面 过 于 
SRL. 
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5-18 


5. 按钮 的 混合 运用 

各 种 按钮 都 有 自身 的 特点 ,但 并 不 是 任何 形式 的 按钮 放 在 一 起 都 是 和 谐 的 ,在 同一 个 网 
页 中 ,主要 按钮 出 现 的 形式 不 应 超过 三 种 。 太 多 的 形式 会 使 网 页 显得 杂乱 无 章 , 风 格 不 统 
-。 但 即便 是 按钮 的 形式 很 少 , 也 未 必 会 达到 统一 的 效果 ,使 按钮 在 网 页 中 和 谐 统 一 有 以 下 
- 些 方法 。 

(1) 以 一 种 按钮 为 主 

无 论 网 页 中 有 多 少 种 按钮 ,只 有 一 种 形式 的 按钮 是 占 绝 大 多 数 的 ,如 图 5-19 所 示 。 虽 
然 网 页 中 的 按钮 样式 非常 丰富 ,但 数量 及 面积 占 大 多 数 的 只 有 左 侧 的 一 排 按钮 。 


商务 休闲 运动 时 关外 的 WERASHASTSMN — anamaqspmus 
mura mazah SERME 


图 5-19 
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(2) 形式 统一 
如 图 5-20 和 图 5-21 所 示 的 两 个 网 页 中 无 论 是 文字 按钮 图 片 按钮 ,还 是 图 形 按钮 都 有 
着 同样 的 颜色 或 被 统一 的 颜色 包围 着 ,所 以 在 视觉 上 非常 和 谐 。 这 是 比较 常用 的 手法 。 
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图 5-21 


按钮 在 网 页 的 布局 中 可 以 起 到 “点 ”“ 线 ”“ 面 "构成 元 素 的 作用 。 

它 起 着 平衡 画面 的 作用 : 平衡 画面 的 黑白 关系 、 蚊 密 关系 、 色 彩 关系 等 。 

这 里 分 析 了 网 页 中 常见 的 几 种 按钮 样式 与 网 页 的 关系 。 其 实 网 页 中 的 按钮 设置 是 非常 
灵活 的 ,并 不 都 是 有 章 可 寻 的 。 所 以 在 设计 网 页 按钮 的 过 程 中 要 充分 发 挥 制作 者 的 创造 力 ， 
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这 样 才能 创造 出 与 众 不 同 的 网 页 来 。 


5.2 按钮 的 设计 原则 


设计 按钮 时 尽量 避免 以 下 设计 禁忌 ,会 使 网 页 设计 更 上 一 层 楼 。 
。 同一 页 面包 含 重复 功能 的 按钮 。 

将 复 选 框 用 作 单 选 按钮 。 

单 选 按钮 之 间 间 隔 太 大 。 

取消 按钮 无 法 真正 取消 操作 。 

返回 按钮 不 能 达到 预期 的 目的 。 

图 片 按钮 被 按 下 后 没有 视觉 变化 。 


5.3 常见 按钮 样式 的 制作 


在 个 性 张扬 的 今天 ,互联 网 也 应 注重 展现 个 性 ,不 同 的 网 站 应 采用 不 同 的 按钮 样式 , 按 
钮 设计 得 好 坏 直 接 影响 了 整个 站 点 的 风格 。 下 面 介绍 几 款 常用 按钮 的 制作 方法 。 


5.3.1 网 页 中 的 按钮 设计 


按钮 与 导航 条 是 密 不 可 分 的 ,将 按钮 以 一 定 的 方式 排列 组 合 到 一 起 就 形成 了 导航 条 。 
由 于 排列 方式 的 不 同 ,导航 条 的 形式 也 多 种 多 样 ,包括 横 排 导航 、 竖 排 导 航 、 多 排 导 航 和 自由 
导航 等 ,一 般 情况 下 ,导航 条 都 出 现在 网 页 的 左 侧 或 者 上 方 ,位 于 网 页 左 侧 的 导航 条 多 为 竖 
排 导 航 条 ,位 于 网 页 上 方 的 导航 条 多 为 横 排 导航 条 ,如 图 5-22 所 示 为 多 排 导航 。 
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自由 的 导航 条 大 多 出 现在 个 人 网 页 中 ,这 种 设计 完全 根据 网 页 的 设计 构成 进行 安排 ,在 
Photoshop 中 利用 图 层 样式 功能 能 够 十 分 轻松 地 制作 出 各 种 按钮 的 效果 ,如 图 5-23 所 示 。 


5.3.2 简单 按钮 的 制作 


下 面 讲解 如 何 制作 一 个 简单 的 按钮 ,实例 效果 如 图 5-24 所 示 。 


实例 效果 
操作 步骤 m s 
CD 新 建 一 个 图 像 文件 ,宽度 250 像素 ,高 度 151 像素 .背景 内 容 


为 白色 ,如 图 5-25 所 示 。 


图 5-25 
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(2) 图 层面 板 中 单 击 新 建 图 层 按钮 .新 增 图 层 一 ,选取 
矩形 工具 ,在 工具 选项 栏 上 按 下 “形状 图 层 ? 按 钮 ,设置 颜色 
为 一 种 灰色 (R: 171,G: 171,B: 171) ,在 窗口 中 拖 动 鼠标 ， 
绘制 出 一 个 灰色 矩形 ,如 图 5-26 所 示 。 

(3) 在 工具 选项 栏 上 选择 样式 为 “雕刻 天 空 样式 ”( 见 
图 5-27) ,可 以 看 到 此 时 的 颜色 变 为 了 斜 角 蓝 白色 样式 的 立 
体 按钮 。 

(4) 用 鼠标 双击 图 层 的 蓝 色 区 域 ,打开 “图 层 样 式 ” 对 话 
框 ,选择 “投影 "样式 ,设置 好 参数 ( 见 图 5-28) , 单 击 “ 确 定 ” 按 钮 ,为 按钮 添加 好 投影 效果 。 
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图 5-26 
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图 5-27 
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(5) 最 后 为 按钮 添加 符号 和 文字 ,新 建 一 个 图 层 , 在 工具 箱 中 按 下 矩形 工具 ,弹出 隐藏 
的 工具 条 ,选择 自 定义 形状 工具 ,在 工具 选项 栏 上 选择 颜色 为 白色 ,在 “形状 "中 选择 “选中 标 
记 ” 图 形 ,如 图 5-29 所 示 。 
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图 5-29 
在 按钮 的 左 侧 拖 动 鼠标 + Z b| i ЛУД” PEDE ,设置 样式 为 无 ,如 图 5-30 所 示 o 
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图 5-30 
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(7) 选取 移动 工具 ,调整 好 小 钩 图 形 的 位 置 , 如 图 5-31 所 示 。 
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图 5-31 
(8) 选取 横 排 文字 工具 ,在 按钮 上 单 击 ,输入 相关 文字 ,选中 文字 ,选择 “窗口 ">“ 样 
式 ”, 打 开 “ 样 式 ” 面 板 , 选 择 “ 基 本 投影 ”, 如 图 5-32 所 示 ,为 文字 添加 上 阴影 效果 。 
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图 5-32 


(9) 选取 移动 工具 ,把 文字 移动 到 适当 的 位 置 ,这 样 就 完成 了 按钮 的 制作 。 
建 好 如 图 5-32 所 示 的 按钮 后 ,请 读者 按 下 面 “举一反三 ”中 的 提示 进行 制作 。 
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举一反三 
(1) 渐变 按钮 
渐变 按钮 经 常会 被 用 到 ,制作 过 程 如 图 5-33 所 示 。 
(2) mac 按钮 


苹果 公司 的 mac 操作 系统 主题 风格 美观 , 常 被 网 页 设计 师 借用 ,图 5-34 为 mac 按钮 的 
制作 过 程 。 


ED EN [emo <= ° J 


图 5-33 图 5-34 


Сз) 流行 配色 按钮 
配色 按钮 色彩 突出 ,与 页 面 搭 配 效果 好 ,请 按 图 5-35 所 示 制 作 配 色 按 钮 。 
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图 5-35 图 5-36 


5.3.3 水 晶 按钮 


可 能 是 受 Apple 的 影响 ,水 晶 按钮 可 以 说 是 最 受 欢 迎 的 按钮 样式 之 一 ,大 家 争 相 模仿 ， 
下 面 就 教 大 家 制作 一 款 橘 红色 的 水 晶 按 钮 ,效果 如 图 5-36 所 示 。 

实例 效果 

操作 步骤 

(1) 打开 Photoshop, 按 Ctrl 十 N 键 ,新 建 一 个 宽 15cm, 高 15cm 的 文件 ,将 它 命 名 为 “水 
fü". 

(20 选择 椭圆 选 框 工具 ,双击 鼠标 ,在 工具 选项 栏 里 设置 :“ 羽 化 ?为 “0 像素 ”, 勾 选 “ 消 
除 锯 齿 ” 复 选 框 “样式 ?为 “固定 大 小 “宽度 "为 “350 像素 ”,“ 高 度 ” 为 “350 像素 ”, 如 
图 5-37 所 示 。 
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СЗ) 将 光标 移 至 图 像 窗口 , 单 击 鼠标 左 键 , 画 出 一 个 固定 大 小 的 圆 形 选区 ,如 图 5-38 
所 示 。 

(4) 新 建 图 层 “ 图 层 1”, 选 择 前 景色 为 CO、M90、Y100、K0, 设 置 背 景色 为 C0、M40、 
Y30、K0。 选 择 渐 变 工具 ,在 其 工具 栏 选项 栏 中 设置 过 渡 色 为 “前 景色 到 背景 色 ”, 过 渡 模 式 
为 “线性 过 渡 ”。 

(5) 选择 “图 层 1”, 再 回 到 图 像 窗 口 ,在 选区 中 按 下 Shift 键 的 同时 由 上 至 下 拖 动 鼠标 填 
充 过 渡 色 ,如 图 5-39 所 示 。 

(6) f Ctrl+D 键 取消 选区 ,选择 “图 层 ”>“ 图 层 样式 ”>“ 投 影 ” 命 令 , 设 置 暗 调 颜 色 为 
C0、M80、Y80、K80, 其 他 选项 设置 如 图 5-40 所 示 。 


‚йш 
ташха ккав ШШ 

mee) — — 2 ys % 
Am С) 120 | EMERG) 
ER(Q:——3— зз |#Ж 
yma: pb % 

图 5-38 大 小 oa (us MR 

ra. 


sa [ 4] Орашац) 
жену о ^ 
Ова) 


В 5-39 图 5-40 


(7) 再 选择 * 图 层 ” 一 “图 层 样式 ”一 “内 发 光 ” 命 令 , 设 置 发 光 颜 色 为 Co, M80, Y80, 
K80 ,其 他 选项 设置 如 图 5-41 所 示 ;这 次 步骤 完成 后 .图像 中 已 经 初步 显示 出 红色 立体 按钮 
的 基本 模样 了 ,如 图 5-42 Bros, 

(8) 新 建 图 层 “ 图 层 2”, 选 择 “ 椭 圆 选 框 工具 ”, 将 工具 选项 栏 中 的 “样式 ”设置 改 为 “ 正 
常 ”, 在 “图 层 2” 中 夯 出 一 个 椭圆 形 选 区 .如 图 5-43 所 示 。 

(9) 双击 工具 箱 中 的 “以 快速 蒙 版 模式 编辑 ”按钮 加 ,打开 “快速 蒙 版 选项 ”对 话 框 , 设 
置 蒙 版 颜色 为 蓝 色 ,如 图 5-44 所 示 , 单 击 “ 好 ”按钮 。 此 时 ,图 像 中 椭圆 选区 以 外 的 部 分 被 带 
有 一 定 透 明度 的 蓝 色 遮盖 。 

(10) 选择 画笔 工具 ,选择 合适 的 笔 刷 大 小 和 硬度 ,这 里 设置 大 小 为 “70” 的 柔 边 圆 笔 刷 ， 
将 光标 移 至 图 像 窗口 ,用 笔 刷 以 蓝 色 蒙 版 色 和 遮盖 部 分 椭圆 ,如 图 5-45 所 示 。 
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图 5-1 图 5-43 


(OD 单 击 工具 箱 中 的 以 标准 模式 编辑 按钮 回 , 这 时 图 像 中 原来 椭圆 形 选区 的 一 部 分 
被 减 去 ,如 图 5-46 所 示 。 


图 5-46 


(12) 选择 前 景色 为 白色 ,并 按 G 键 把 工具 换 成 渐变 工具 ,在 工具 选项 栏 中 的 “渐变 编辑 
器 ”中 设置 过 渡 模 式 为 “前 景 到 透明 ”, 按 下 Shift 键 , 同 时 在 选区 中 由 上 到 下 填充 渐变 ,之 后 
按 Ctrl 十 H 键 隐藏 选区 观察 效果 ,如 图 5-47 所 示 。 

(13) 再 新 建 图 层 “ 图 层 3”, 按 Ctrl 键 , 单 击 图 层面 板 中 的 “图 层 1”, 重 新 获得 圆 形 选区 ， 
选择 “选择 ”修改 ”收缩 ”命令 ,在 弹出 的 对 话 框 中 设置 “收缩 量 " 为 “7 像素 ,将 选区 压 
缩 , 如 图 5-48 所 示 。 

(14) 选择 矩形 选 框 工具 ,将 光标 移 至 图 像 窗口 , 按 下 Alt 键 , 由 选区 左上 部 拖 动 鼠标 到 


选区 的 右 下 部 四 分 之 三 处 , 减 去 部 分 选区 ,如 图 5-49 所 示 。 
图 5-47 图 5-48 
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(15) 仍 用 白色 作为 前 景色 ,并 再 次 选择 渐变 工具 ,渐变 模式 设置 为 “前 景 到 透明 ”, 按 
Shift 键 的 同时 在 选区 中 由 下 到 上 做 渐变 填充 ,之 后 按 Ctrl 十 H 键 隐藏 选区 观察 效果 ,如 
图 5-50 所 示 。 

(16) 选择 “ 滤 镜 ”>“ 模 糊 ” 一 “高 斯 模糊 ”命令 ,在 对 话 框 的 “半径 ”中 填 入 适当 的 数值 
“7”, 单 击 “ 好 ”按钮 ,加 上 高 斯 模糊 效果 。 

AD 回 到 图 像 窗口 ,在 图 层面 板 中 把 “图 层 3" 的 “不 透明 度 " 设 置 为 "68%”。 至 此 ,水 曲 
按钮 就 制作 完成 了 ,如 图 5-51 所 示 。 

读者 还 可 以 尝试 制作 不 同色 彩 的 按钮 .或 者 在 合并 图 层 后 选择 “图 像 卫 “调整”*”>“ 色 
相 / 饱 和 度 ” 命 令 , 选 中 “着 色 ” 复 选 框 后 对 按钮 进行 颜色 的 变换 ,将 它们 运用 到 你 的 网 页 中 
去 ,一定 会 增添 许多 情趣 。 

举一反三 

图 5-52 所 示 也 是 一 款 水 晶 按钮 ,和 之 前 那 款 红色 水 晶 按钮 不 同 的 是 这 款 圆 角 和 矩形 的 按 
钮 更 加 精致 ,加 入 了 更 多 的 细节 。 看 上 去 如 此 精致 的 按钮 ,其 操作 步骤 实际 上 相当 的 简单 ， 
即使 是 初学 者 也 可 以 做 到 。 
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图 5-50 图 5-51 图 5-52 


这 款 按钮 运用 到 的 “图 层 样式 "有 :“ 外 发 光 ”“ 内 发 光 ”“ 渐 变 释 加”、“ 图 案 倒 加 ” 
以 及 “ 描 边 "。 其 中 “外 发 光 ” 是 为 了 表现 出 阴影 的 效果 ,那么 为 什么 不 直接 用 “投影 ” 
呢 ? 这 个 就 需要 你 来 思考 了 ,或 者 你 也 可 以 尝试 用 “投影 "来 替代 “外 发 光 ”, 看 看 效果 
有 什么 不 同 .“ 图 案 和 至 加 ”实际 上 是 给 按钮 加 上 了 个 不 透明 度 很 低 的 斜纹 ,使 其 更 特 
别 。 要 注意 的 是 这 款 按钮 的 样式 中 用 到 了 很 多 新 的 “混合 模式 ”, 读 者 要 耐心 地 去 调 
试 ,找到 最 适合 的 。 

另外 ,大 家 可 以 看 到 ,这 款 按钮 除了 用 钢笔 工具 制作 了 一 个 大 高 光 外 ,左上 角 和 右 下 角 
分 别 有 两 处 小 高 光 , 这 也 是 按钮 出 彩 的 地 方 ,所 以 千 万 不 要 忽略 细节 哟 ! 


5.4 导航 条 的 制作 


导航 条 是 最 早出 现在 网 页 上 的 页 面 元 素 之 一 。 导 航 条 就 好 像 一 本 书 的 目录 , 先 有 章 ,而 
后 是 节 , 再 就 是 小 节 。 如 果 把 导航 条 比 作 图 书馆 里 的 标签 分 类 也 很 形象 一 一 文学 书 这 边 走 ， 
艺术 书 那 边 走 。 没 有 导航 条 ,那么 浏览 者 在 站 点 内 穿梭 , 岂 不 是 要 到 处 碰壁 了 人 么 ? 

导航 条 既是 网 站 的 路 标 , 又 是 分 类 名 称 , 是 十 分 重要 的 。 导 航 栏 应 放置 到 页 面 的 显著 位 
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置 ,让 浏览 者 在 第 一 时 间 内 看 到 它 并 作出 判断 ,确定 要 进入 哪个 栏目 中 去 搜索 他 们 所 要 的 信 
息 。 导 航 栏 的 设计 根据 具体 情况 可 以 有 多 种 变化 , 它 的 设计 风格 决定 了 页 面 设计 的 风格 。 
反 过 来 ,设计 师 已 经 大 致 上 有 了 网 页 设计 的 模式 ,也 可 以 按照 模式 的 方向 去 把 握 导 航 的 
风格 。 

我 们 先 在 看 看 导航 的 分 类 : 横 排 导航 、 竖 排 导 航 ,多 排 导 航 、 图 片 式 导航 、Frame 框架 
快捷 导航 Jump Menu 下 拉 菜 单 、 隐 藏 式 导 航 , 甚 至 还 可 以 是 动态 效果 的 Flash 导航 等 。 
有 时 大 的 导航 里 面 还 有 小 的 导航 ,在 某 些 情况 下 ,大 导航 和 小 导航 需要 设计 在 同一 个 页 
面 内 。 

导航 样式 非常 多 ,怎样 选用 适合 网 页 风格 的 导航 呢 ? 

选用 导航 的 先决 条 件 有 两 个 : 是 否 符合 页 面 风格 ;是 否 符合 信息 类 别 分 类 。 

下 面 教 大 家 如 何 用 Photoshop 制作 出 如 图 5-53 所 示 的 导航 条 。 

实例 效果 
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操作 步骤 

CD 新 建 一 个 宽 500px, 高 50px 的 文件 ,将 它 命名 为 “导航 条 ”。 

(2) 新 建 图 层 ,命名 为 “导航 背景 ”, 选 择 矩 形 选 框 工具 绘制 500pxX30px 的 导航 轮廓 ， 
填充 上 前 景色 ,双击 图 层 的 缩 览 图 ,在 弹出 的 对 话 框 中 选择 左 侧 的 “渐变 到 加 ”, 作 如 图 5-54 
所 示 的 设置 ,其 中 中 间 的 颜色 为 “#4D8EBA”, 两 端 颜色 为 “ 井 87B6D4”。 
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СЗ) 再 选择 “ 描 边 ”, 作 如 图 5-55. 所 示 的 设置 ,其 中 描 边 的 颜色 为 #4D8EBA”。 


图 5-55 


CD 新 建 图 层 , 命 名 为 “斜纹 ”, 按 住 Ctrl 键 的 同时 单 击 “ 导 航 背 景 "图 层 读 取 选区 ,选择 
“编辑 ”一 “填充 ”命令 ,填充 图 案 如 图 5-56 所 示 , 将 “不 透明 度 ” 改 为 “43%”, 得 到 如 图 5-57 


所 示 的 效果 。 


图 5-56 图 5-57 


(5) 新 建 图 层 ,命名 为 “左上 角 ”, 创 建 如 图 5-58 所 示 的 选区 ,填充 渐变 色 “#366F99” 到 
“#5891BA”。 同 样 给 该 图 层 添 加 “图 层 样式 ”内 阴影 ”参数 设置 如 图 5-59 所 示 。 


图 5-58 


(6) 再 选择 * 描 边 ”, 颜 色 同 样 设置 为 “# 4D8EBA”,“ 位 置 * 选 择 * 内 部 ”, 添 加 “图 层 样 
式 ” 后 效果 如 图 5-60 所 示 。 

(7) 复制 “左上 角 ” 图 层 , 重 命名 为 “ 右 下 角 ”, 将 其 移动 到 与 “左上 角 ” 图 层 对 应 的 位 置 。 

(8) 新 建 图 层 , 命 名 为 “分 隔 线 ”, 用 #316B94 和 白色 绘制 如 图 5-61 所 示 的 图 像 ,在 不 取 
消 选区 的 情况 下 转换 到 “通道 ”面板 ,新 建 Alphal 通道 ,在 选区 内 由 上 到 下 填充 “白色 一 黑 
色 一 白色 ?的 渐变 ,在 按 住 Ctrl 键 的 同时 单 击 该 通道 , 回 到 “分 隔 线 ”图 层 , 按 Ctrl 十 Shift 十 I 
键 进行 反选 后 按 Delete 键 删除 ,复制 几 个 该 图 层 , 分 别 移动 到 合适 的 位 置 后 对 齐 并 合并 , 效 
果 如 图 5-62 所 示 。 
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图 5-60 


(9) 用 * 横 排 文字 工具 ”输入 各 个 导航 文字 ,合并 后 加 上 ”距离 ”和 * 大 小 "分别 为 “2 像素 
的 投影 ,最 终 效果 如 图 5-63 所 示 。 
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В 5-61 图 5-63 


这 是 一 款 制作 过 程 简单 易学 的 导航 条 ,但 是 却 十 分 常用 ,大 家 一 定 要 好 好 掌握 ,说 不 定 
在 今后 的 网 页 设计 中 就 能 用 上 。 
5.5 动态 按钮 的 制作 


动态 按钮 简单 的 一 种 是 在 动态 图 片上 加 上 超级 链接 ,经 常用 在 友情 链接 .醒目 的 宣传 广 
告 . 制 作成 内 容量 大 的 banner 广告 栏 等 。 可 以 用 Photoshop 制作 好 静态 图 片 ,再 导入 到 
ImageReady 里 面 制作 gif 动画 。 以 下 是 一 个 动态 按钮 的 制作 过 程 。 


操作 步骤 


(1) 利用 Photoshop 制作 简单 动态 图 片 的 必 备 条 件 , 即 Photoshop 必须 是 7.0 及 以 上 
的 版 本 , 并且 自 带 有 ImageReady 界面 。 那 么 如 何 判 断 Photoshop 是 否 自 带 


ImageReady 呢 ? 
Ф 打开 Photoshop , 主 界面 如 图 5-64 所 示 o 


© 按 Ctrl 十 Shift 十 M 键 或 单 击 ImageReady 转换 按钮 ( 见 图 5-65) 进 行 切换 。 
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图 5-64 


一 转换 按钮 


图 5-65 
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© 打开 的 ImageReady 界面 如 图 5-66 所 示 。 
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Adobe'ImageReady'cs 


图 5-66 


(2) 制作 简单 动态 图 片 的 过 程 中 所 接触 到 的 几 个 主要 面板 工具 如 下 : 
(D Photoshop 界面 中 的 主要 面板 工具 如 下 : 
工具 箱 : 包括 转换 按钮 ,其 他 工具 按钮 暂 不 作 介绍 ,如 图 5-67 Bron o 


\ 


ImageReady 转 换 按钮 
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图 5-67 


图 层面 板 : 包括 指示 图 层 可 视 性 按钮 .创建 新 图 层 按 钮 .删除 图 层 按钮 等 ,如 图 5-68 
所 示 。 
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层面 板 一 
指示 图 层 可 视 性 


@ Adobe ImageReady 界面 中 的 几 个 主要 工具 如 下 : 
动画 面板 : 包括 选择 延迟 时 间 按 钮 .播放 /停止 动画 按钮 ,复制 当前 帧 按钮 ,删除 选中 的 
帧 按钮 等 ,如 图 5-69 所 示 。 


图 5-69 


图 层面 板 : 包括 指示 图 层 可 视 性 按钮 .创建 新 图 层 按 钮 .删除 图 层 按钮 等 ,如 图 5-70 
所 示 。 

(3) 制作 简单 动态 图 片 的 方法 。 

Ф 打开 Photoshop, 选 择 “ 文 件 ”一 “打开” 命令 ,打开 用 来 制作 动态 图 片 的 图 像 。 

选择 “图 像 ?>“ 图 像 大 小 ”命令 ,然后 在 打开 的 “图 像 大 小 ”对 话 框 中 设置 图 像 的 “宽度 ” 
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创建 新 图 层 。 删除 图 层 
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图 5-70 


和 “高 度 ”, 如 宽度 为 800 像素 ,高 度 为 600 像素 。 设 移 好 后 单 击 “ 确 定 ” 按 钮 ,如 图 5-71 所 
示 。 之 后 关闭 图 像 。 
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按 上 述 方法 ,把 准备 用 来 制作 动态 图 片 的 所 有 图 像 设置 为 同样 大 小 。 关 闭 所 有 打开 的 
图 像 。 
@ 选择 “文件 ”>“ 新 建 "命令 ,在 打开 的 “新 建 ”对 话 框 中 输入 新 建 图 像 的 “名 称 ”, 然 后 
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设置 图 像 的 “宽度 ”和 “高 度 ”( 如 宽度 为 800 像素 ,高 度 为 600 像素 ), 设 置 好 后 确定 ,如 
图 5-72 所 示 。 
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图 572 


Ж: 新 建 图 像 的 大 小 必须 和 用 来 制作 动态 图 片 的 图 像 大 小 一 致 。 
@ 打开 已 经 设置 好 大 小 、 并 用 来 制作 动态 图 片 的 图 像 ( 见 图 5-730 , 按 Ctrl 十 A 键 选中 
整个 图 像 , 再 按 Ctrl 十 C 键 复制 图 像 ,之 后 关闭 图 像 。 
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图 5-73 
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在 新 建 的 图 像 文 件 中 按 Ctrl 十 V 键 粘贴 图 像 , 如 图 5-74 所 示 。 
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图 5-74 


按 上 述 方法 操作 ,直至 把 所 有 用 来 制作 动态 图 片 的 图 像 复制 到 新 建 图 像 中 。 这 时 就 能 
在 “图 层面 板 ” 中 看 到 所 有 复制 后 的 图 像 图 标 ,如 图 5-75 所 示 。 


ImageReady 转 换 按 钮 
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В 5-75 


Ф 按 工具 箱 中 最 下 面 的 “ImageReady 转换 ”按钮 或 按 Ctrl + Shift + M 键 ,转换 到 
ImageReady 界面 ,如 图 5-76 所 示 。 


123 


жож ”网 页 中 按钮 的 制作 及 应 用 


GE Op s 
£w SEN NAT E] 


= 


图 5-76 


© 在 动画 面板 中 设置 帧 延迟 时 间 , 如 图 5-77 所 示 。 
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图 5-77 


然后 单 击 “ 复 制 当前 帧 "按钮 .复制 与 图 层面 板 中 相同 图 层 数量 的 帧 ,如 图 5-78 
所 示 。 

© 在 动画 面板 中 由 左 到 右 选 择 * 帧 ”, 同 时 在 图 层面 板 中 由 下 而 上 设置 “指示 图 层 可 视 
性 ”( 即 眼睛 图 标 ) ,使 之 相互 对 应 ,如 图 5-79 所 示 。 
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图 5-79 


CD 在 动画 面板 中 单 击 “ 播 放 / 停 止 动画 ”按钮 ( 见 图 5-80) ,播放 动画 。 

如 果 对 动态 不 满意 , 则 再 次 单 击 “ 播 放 / 停 止 动 画 ” 按 钮 .停止 播放 后 进行 调整 ,直到 满意 
为 止 。 

选择 “文件 ”>“ 将 优化 结果 存储 为 "命令 或 按 Ctrl 十 Shift 十 Alt 十 S 键 ,保存 制作 好 的 
动态 图 片 为 gif 格式 ,如 图 5-81 所 示 。 

实例 效果 

这 样 ,我 们 就 可 以 根据 实际 需求 ,制作 动态 效果 的 按钮 ,如 图 5-82 所 示 的 88X 31 像素 
的 友情 链接 动态 按钮 。 
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图 5-82 


125 


126 


网 页 设计 与 网 站 规划 


习题 5 


5-1 按钮 与 网 页 之 间 存 在 什么 关系 ? 

5-2 ”运用 文字 按钮 有 什么 好 处 ? 

5-3 ”要 在 图 形 、 图 像 按钮 加 上 超 链接 ,有 哪 几 种 方式 ? 

5-4 在 Photoshop 里 面 怎样 启动 ImageReady? 

5-5 大 多 数 浏览 器 都 默认 支持 的 动态 图 片 格式 是 什么 格式 ? 
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本 章 知 识 点 

。 获得 最 佳 优化 图 像 

。 制作 Web 图 片 库 

。 GIF 动画 在 网 页 中 的 制作 与 运用 
° 网 页 背景 无 颖 贴图 的 制作 

。 图 层 样式 在 网 页 中 的 运用 

本 章 学 习 目 标 

。 掌握 获得 最 佳 优 化 图 像 的 方法 
° 了 解 如 何 制作 Web 图 片 库 

。 了 解 GIF 动画 在 网 页 中 的 制作 与 运用 
。 掌握 网 页 背景 无 缝 贴图 的 制作 
。 了 解 图 层 样式 在 网 页 中 的 运用 


6.1 优化 图 像 


6.1.1 图 片 优化 基本 原则 


图 像 用 数字 任意 描述 像素 点 ,强度 和 颜色 。 描 述 信息 文件 存储 量 较 大 ,所 描述 对 象 在 缩 
放 过 程 中 会 损失 细节 或 产生 锯齿 。 在 显示 方面 它 是 将 对 象 以 一 定 的 分 辩 率 分 辨 以 后 将 每 个 
点 的 色彩 信息 以 数字 化 方式 呈现 ,可 直接 快速 在 屏幕 上 显示 。 分 辨 率 和 灰 度 是 影响 显示 的 
主要 参数 。 图 像 适用 于 表现 含有 大 量 细 节 ( 如 明暗 变化 、 场 景 复 杂 、 轮 廓 色彩 丰富 ) 的 对 象 ， 
如 照片 .绘图 等 ,通过 图 像 软 件 可 进行 复杂 图 像 的 处 理 以 得 到 更 清晰 的 图 像 产 生 特殊 效果 。 

图 像 处 理 是 对 图 像 进行 分 析 ` 加 工 和 处 理 , 使 其 满足 视觉 ,心理 以 及 其 他 要 求 的 技术 。 
图 像 处 理 是 信号 处 理 在 图 像 领域 上 的 一 个 应 用 。 

1. 图 片 裁 切 

切 图 时 尽量 贴 合 图 形 区 ,避免 空白 区 域 占 用 文件 大 小 。 

2. 图 片 输出 

(1) 使 用 Photoshop 的 “存储 为 Web 所 用 格式 ”功能 来 输出 照片 ,测试 表明 : 输出 某 张 
图 片 为 jpg 格式 ,分 别 使 用 “存储 为 Web 所 用 格式 ”和 一 般 的 “存储 为 ”, 都 压缩 到 50% ,前 者 
得 到 的 图 片 结果 为 14. 4KB, 后 者 为 47. 1KB。 
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(2) 在 使 用 上 述 功 能 进行 图 片 输出 的 过 程 中 ,对 比 JPG、GIF 格式 下 的 文件 大 小 ,选择 
效果 和 大 小 较 优 的 文件 格式 。 

一 般 情况 下 ,色彩 少 的 图 片 使 用 png(8 位 )、GIF 格式 文件 会 小 些 , 色 彩 渐变 丰富 的 图 
片 , 则 使 用 JPG 会 小 些 。 

(3) JPG 格式 的 图 片 , 需 综合 对 比 压缩 品质 高 、 中 、 低 下 的 效果 ,尽量 选择 效果 好 且 压 缩 
品质 较 低 的 选项 ,以 达到 获取 较 小 文件 的 目的 。 

(4) 对 于 无 多 通道 透明 需求 的 图 片 ,避免 使 用 png(24 位 ) 格 式 输出 。 


6.1.2 GIF 图 片 的 优化 处 理 


GIF(Graphics Interchange Format) 的 原意 是 “图 像 互 换 格式 ”, 是 CompuServe 公司 在 
1987 年 开发 的 图 像 文件 格式 。GIF 文件 的 数据 ,是 一 种 基于 LZW 算法 的 连续 色调 的 无 损 
压缩 格式 。 其 压缩 率 一 般 在 50% 左 右 , 它 不 属于 任何 应 用 程序 。 目 前 几乎 所 有 相关 软件 都 
支持 它 ,公共 领域 有 大 量 的 软件 在 使 用 GIF 图 像 文件 。 

GIF 图 像 文 件 的 数据 是 经 过 压缩 的 ,而 且 是 采用 了 可 变 长 度 等 压缩 算法 。 所 以 GIF 的 
图 像 深度 从 1 位 到 8 位 ,也 即 GIF 最 多 支持 256 种 色彩 的 图 像 。GIF 格式 的 另 一 个 特点 是 
其 在 一 个 GIF 文件 中 可 以 存 多 幅 彩色 图 像 , 如 果 把 存 于 一 个 文件 中 的 多 幅 图 像 数 据 逐 幅 读 
出 并 显示 到 屏幕 上 ,就 可 构成 一 种 最 简单 的 动画 。 

GIF 解码 较 快 ,因为 采用 隔行 存放 的 GIF 图 像 ,在 边 解码 边 显 示 的 时 候 可 分 成 4 遍 扫 
描 。 第 一 遍 扫描 虽然 只 显示 了 整个 图 像 的 1/8, 第 二 遍 的 扫描 后 也 只 显示 了 1/4, 但 这 已 经 
把 整 幅 图 像 的 概貌 显示 出 来 了 。 在 显示 GIF 图 像 时 ,隔行 存放 的 图 像 会 使 您 感觉 到 它 的 显 
示 速 度 似乎 要 比 其 他 图 像 快 一 些 , 这 是 隔行 存放 的 优点 。 

有 些 图 片 ,色彩 并 不 是 很 丰富 ,通过 对 比 可 知 输出 GIF 会 更 小 些 ;或 者 ,因为 要 用 在 多 
种 背景 中 使 用 ,需要 输出 为 透明 格式 ( 非 多 通道 ), 这 时 ,就 需要 选用 GIF 格式 。 我 们 都 知道 
JPG 格式 可 以 通过 控制 压缩 比 来 优化 ,相对 于 JPG,GIF 优化 
是 比较 容易 被 忽视 的 。 当 笔者 看 到 身边 有 些 朋 友 在 输出 GIF 
时 基本 不 作 什么 优化 选择 ,觉得 很 可 惜 。 其 实 ,即使 确定 要 输 
出 GIF 格式 ,通常 也 仍 有 继续 缩小 文件 的 余地 。 

下 面 通过 图 6-1 所 示 的 试验 ,来 分 析 一 下 GIF 图 片 的 
优化 。 

请 看 看 下 面 4 个 图 片 ,大 家 用 肉眼 能 看 出 区 别 来 吗 ? 

如 果 不 放大 到 像素 级 来 一 个 一 个 点 地 对 比 观 看 ,是 很 难 
辨认 出 有 何不 同 的 。 

其 实 , 这 几 张 图 片 有 着 不 同 的 色 阶 。 请 看 图 6-2 所 示 的 在 Photoshop 中 输出 时 的 相关 
参数 ,注意 文字 中 标注 的 内 容 。 

样 图 解读 : 

图 6-1 的 图 1 为 要 输出 的 原 图 效果 ; 
图 6-1 的 图 2 为 64 色 输 出 的 效果 ,输出 后 文件 大 小 为 2. 233KB; 
图 6-1 的 图 3 为 128 色 输 出 的 效果 ,输出 后 文件 大 小 为 2.756KB; 
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6-1 的 图 4 为 256 色 输 出 的 效果 ,输出 后 文件 大 小 为 3. 468KB. 


由 此 可 见 , 上 述 4 张 图 中 ,在 肉眼 可 辨识 情况 下 ,64 色 的 图 片 对 比 256 色 图 片 ,输出 后 
可 以 少 掉 一 半 还 多 的 字 节 数 , 且 效 果 完 全 能 满足 视觉 要 求 。 不 要 小 看 这 几 百 个 字 节 ,试想 网 


站 里 几 百 张 图 片 ,如 果 每 张 图 都 节省 一 些 , 最 终 可 以 节省 多 少 空间 出 来 ? 


图 6-3 所 示 为 Photoshop 的 输出 模式 中 提供 的 gif 色彩 选项 。 
根据 这 些 选项 ,我 们 再 看 看 更 多 的 GIF 格式 下 多 色 阶 的 效果 和 文件 大 小 对 比 ,如 图 6-4 


所 示 。 


经 对 比 可 知 , 其 实 对 于 此 图 片 而 言 ,用 32 色 来 输出 也 是 可 以 接受 的 。 
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图 6-4 


Gif 优化 小 结 : 对 于 gif 而 言 ,色彩 越 少 , 文 件 也 就 越 小 。 在 肉眼 可 接受 的 范围 内 ,尽量 
将 gil 色彩 数量 降低 ,能 够 对 gif 图 大 小 进行 有 效 的 优化 。 道 理 其 实 很 简单 ,关键 就 在 于 我 


们 实际 输出 过 程 中 要 细心 .耐心 。 


0 
hs 网 页 设计 与 网 站 规划 


6.2 制作 Web 图 片 库 


制作 Web 图 片 库 可 以 用 缩 略 图 的 形式 来 管理 照片 ,查找 方便 ,快捷 。 下 面 将 向 大 家 介 
绍 详细 的 操作 步骤 。 
CD 选择 "文件 ”浏览 ”命令 ,打开 文件 浏览 器 ,如 图 6-5 所 示 。 
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(2) 在 “文件 夹 ”面板 中 ,找到 要 放置 到 Web 页 上 的 照片 所 在 的 文件 夹 。Photoshop 将 在 
图 片 库 中 显示 相应 的 缩 略 图 。 再 选择 “输出 ”>“Web 画廊 ”, 设 置 相关 参数 ,如 图 6-6 所 示 。 

(3) 要 重 排 图 像 的 顺序 ,将 缩 略图 图 像 拖 移 到 需要 的 位 置 即 可 。 

(4) 如 果 只 想 在 图 片 库 中 包括 部 分 图 像 , 可 按 住 Ctrl 键 选择 要 包括 的 图 像 。 

(5) 按照 用 户 要 求 ,设置 “ 站 点 ”参数 ,如 图 6-7 所 示 。 
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C6) 按照 用 户 要 求 ,设置 “ 颜 色调 板 ” 和 “外 观 ” 参 数 , 如 图 6-8 所 示 。 
Ст) 输出 图 片 库 , 如 图 6-9 所 示 。 
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6.3 GIF 动画 在 网 页 中 的 制作 与 运用 


6.3.1 逐 帧 动画 


在 浏览 网 页 的 时 候 , 我 们 经 常 看 到 一 些 动态 的 图 像 ,从 一 个 画面 到 另 一 个 画面 交替 地 显 
示 着 ,很 能 引起 我 们 的 注意 。 

这 些 生动 的 画面 是 如 何 制 作出 来 的 呢 ? 我 也 能 办 得 到 吗 ? 其 实 这 并 不 深奥 ， 
Photoshop 图 像 是 由 许多 图 层 组 成 的 ,分 层 处 理 图 像 是 Photoshop 的 重要 技术 ,这 里 我 
们 就 用 分 层 显示 的 办 法 来 产生 动态 效果 的 。 具 体 来 说 ,就 是 一 个 图 像 文件 包含 了 若干 
幅 图 像 , 我 们 控制 它 每 次 仅 显 示 其 中 的 一 张 .间隔 一 段 时 间 再 显示 另 一 张 ,实现 了 交替 
显示 效果 。 

1. 认识 GIF 动画 

精美 的 动画 是 制作 网 站 必 不 可 少 的 元 素 , 尤 其 是 GIF 动画 ,可 以 让 原本 呆板 的 网 站 变 
得 棚 棚 如 生 。 大 家 见得 最 多 的 可 能 就 是 那些 不 断 旋转 的 ”Welcome”, 以 及 风格 各 异 的 网 站 
页 面 横幅 广告 。 在 Windows 平台 上 ,制作 GIF 动画 有 许多 工具 ,其 中 著名 的 有 Adobe 公司 
的 ImageReady、 友 立 公 司 的 GIF Animation 等 。 

ImageReady 是 基于 图 层 来 建立 的 GIF 动画 的 , 它 能 自动 划分 动画 中 的 元 素 , 并 能 将 
Photoshop 中 的 图 像 用 于 动画 帧 。 它 具有 非常 强大 的 Web 图 像 处 理 能 力 , 可 以 创作 富有 动 
感 的 GIF 动画 ,有 趣 的 动态 按键 ,甚至 漂亮 的 网 页 。 所 以 ,ImageReady 完全 有 能 力 独立 完 
成 从 制图 到 动画 的 过 程 , 它 与 Photoshop 的 紧密 结合 更 能 显示 出 它 的 优势 。 随 着 
Photoshop 的 不 断 发 展 ,现在 的 CS4 版 本 已 经 整合 了 ImageReady 的 大 部 分 功能 。 

大 家 还 记得 ,在 Word 和 PowerPoint 可 以 很 轻松 插入 剪贴 画 。 你 知道 吗 ,在 剪贴 画 库 
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中 有 许多 动画 剪辑 ,这 些 动画 剪辑 就 是 GIF 动画 ( 见 图 6-10) 。 
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图 6-10 


打开 Photoshop 软件 ,使 用 “文件 ”菜单 打开 一 些 GIF 动画 文件 , 按 下 动画 面板 的 播放 
按钮 , 试 着 播放 动画 ,观察 动画 效果 。 

2. 动画 面板 

从 面板 中 可 以 看 到 ,共有 7 幅 图 像 ,我 们 称 动 画 由 7 帧 组 成 ,其 中 第 一 幅 图 有 蓝 色 的 框 
框 ,表示 它 为 当前 帧 。 在 播放 动画 时 ,这 个 蓝 色 的 框 从 左 向 右 移 动 。 面 板 中 的 “0. 1 秒 ”, 表 
示 每 帧 图 像 延迟 时 间 为 0. 1 ЖУ, 

什么 叫 * 帧 "? 

动画 是 一 个 比较 系统 的 专业 , 它 是 根据 人 们 眼睛 的 视觉 残留 作用 这 一 电影 的 原理 , 画 出 
一 张 张 不 动 的 ,但 逐渐 变化 的 画面 ,经 过 每 秒 若干 幅 的 速度 连续 播放 ,画面 便 动 起 来 ,这 里 的 
每 一 幅 图 像 , 就 叫做 “ 帧 ”。 

在 没有 计算 机 的 年 代 , 制 作 一 部 动画 片 .就 需要 手工 绘制 出 每 一 帧 图 像 ,然后 拍照 。 电 
影 播放 速度 是 每 秒 24 帧 ,你 算 一 算 ,要 制作 一 部 一 小 时 的 动画 片 , 需 要 画 多 少 幅 画面 ? 现在 
有 了 电子 计算 机 ,我 们 可 以 让 计算 机 分 担 一 部 分 重复 、 繁 重 而 又 乏味 的 工作 。 

下 面 来 讲 讲 分 解 动作 。 如 图 6-11 所 示 小 狗 奔跑 每 帧 画面 延迟 0. 1 秒 ,如 果 加 大 这 个 时 
间 值 ,我 们 看 到 的 将 是 分 解 动作 , 试 一 试 。 你 是 一 帧 一 帧 地 改变 帧 延迟 时 间 吗 ?如 果 动 画 有 
数 百 帧 ,你 不 觉得 烦 吗 ? Shift 键 能 帮助 你 一 次 完成 所 有 帧 延迟 的 时 间 设 定 。 面 板 右 上 角 的 


小 三 角 也 可 以 利用 。 
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图 6-11 


133 


Ж 6% H] Photoshop 优化 Web 页 


3. 图 层 与 帧 
在 小 狗 动画 中 ,动画 面板 上 显示 了 7 帧 图 像 , 相 应 的 层面 板 也 有 7 层 。 每 一 帧 只 显示 其 中 
的 一 个 图 层 。 第 1 帧 显示 图 层 1, 第 2 帧 显示 图 层 2…… 各 帧 面 面 都 不 相同 ,如 图 6-12 所 示 。 
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6.3.2 GIF 动画 的 制作 步骤 


图 6-13 所 示 为 制作 GIF 动画 素材 ,下 面 是 制作 的 具体 操作 步骤 : 

CD 启动 Photoshop ,并 打开 需要 的 两 幅 图 ,如 图 6-14 所 示 。 

(2) 选择 图像”~“ 图 像 大 小 ”命令 ,如 图 6-15 Bron 。 

打开 “图 像 大 小 ”对 话 框 ,修改 宽度 和 高 度 的 像素 ,如 图 6-16 所 示 。 注 意 下 面 红 线 里 的 
约束 比例 ,要 改 成 非 比 例 的 大 小 就 把 勾 去 掉 , 然 后 将 两 幅 图 片 调整 到 同样 大 小 。 
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图 6-14 
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图 6-16 


(3) 很 多 JPG 格式 的 图 在 Photoshop 里 是 锁定 的 ( 见 图 6-17) ,所 以 双击 图 层 里 的 背景 
项 ,会 弹出 一 个 对 话 框 ,将 背景 变 为 图 层 。( 同 理 , 另 一 幅 图 片 也 如 此 操作 。 但 注意 在 
Photoshop 里 通过 单 击 图 片 来 改变 当前 编辑 的 图 片 ,所 以 要 修改 另 一 幅 图 片 先 要 单 击 它 
= 

(4) 选择 工具 箱 上 面 左边 的 选择 工具 ,如 图 6-18 所 示 。 

然后 按 住 一 幅 图 片 将 它 拖 至 另 一 幅 图 片 里 。 这 时 在 图 层 里 应 该 有 两 个 图 层 
OLEI 6-19) ,然后 将 两 个 图 片 根据 画面 的 大 小 调整 一 致 。 
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图 6-17 图 6-18 


(5) 打开 “动画 ”窗口 ,注意 这 里 应 该 显示 两 个 图 层 .如 图 6-20 所 示 。 

(6) 在 动画 工具 栏 里 单 击 “ 复 制 当 前 帧 ”, 即 图 6-21 中 用 圈 圈 住 的 按钮 。 复 制 后 ,在 动 
画 里 会 显示 有 两 个 帧 ,如 图 6-22 所 示 。 

CD) 单 击 动画 工具 栏 里 的 “过 渡 ” 按 钮 ,如 图 6-23 所 示 。 
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图 6-20 


打开 * 过 渡 "对 话 框 ,如 图 6-24 所 示 。 在 * 要 添加 的 帧 数 "文本 框 里 输入 你 需要 的 帧 数 ， 
IIT "lll. ——E 
r-—7 —— 


这 时 动画 面板 里 会 显示 有 7 个 帧 ,如 图 6-25 ир 
所 示 。 хат) ШШ [я] 
(8) 这 时 看 看 图 层 里 的 当前 图 层 是 否 为 жашы Lx 
图 6-25, 若 不 是 的 话 单 击 它 使 它 变 成 当前 图 层 ,如 
图 6-26 所 示 。( 注 意 有 蓝 色 条 显示 的 就 是 当前 ООО | Carem 
图 层 ) 
选择 好 当前 图 层 后 , 单 击 动画 面板 里 第 2 帧 。 


如 图 6-27 中 箭头 所 指 的 帧 。 
单 击 后 第 2 帧 应 该 是 蓝 色 的 。 


图 6-24 
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图 6-27 


然后 在 图 层面 板 中 修改 透明 度 ,将 其 从 100% k 29 80% ,如 图 6-28 所 示 。 
(9) 接着 选择 第 З 帧 。 在 图 层面 板 中 将 其 不 透明 值 改 为 60% 。 

(10) 单 击 选 中 第 4 帧 ,在 图 层面 板 中 将 其 不 透明 值 改 成 40% 。 

(11) 单 击 第 5 帧 ,将 其 不 透明 值 改 成 20%。 

(12) 单 击 第 6 帧 ,将 其 不 透明 值 改 成 0%。 

(13) 单 击 第 1 帧 ,如 图 6-29 所 示 。 

单 击 “ 选 择 帧 延迟 时 间 ”, 如 图 6-30 所 示 。 

单 击 后 会 弹出 一 个 菜单 ,如 图 6-31 所 示 。 
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图 6-31 


选择 0. 2 秒 延 迟 后 ,第 1 帧 下 面 会 变 为 0. 2 秒 , 如 图 6-32 所 示 。 
(14) 单 击 第 7 帧 ,如 图 6-33 所 示 。 
将 其 也 变 为 延迟 0.2 秒 , 如 图 6-34 所 示 o 


图 6-33 
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图 634 6-35 


(16) 选择 “文件 ”>“ 存 储 为 Web 和 设备 所 用 格式 ”命令 。 
根据 图 6-36 信息 进行 设置 后 , 按 图 6-36 所 示 的 “存储 ”按钮 ,进行 保存 就 可 以 了 。 
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6.4 网 页 背景 无 缝 贴图 的 制作 


6.4.1 感受 无 缝 平 铺 图 案 


现在 我 们 在 Photoshop 中 建立 一 个 图 案 填充 层 ( 单 击 图 层面 板 下 方 的 移 按钮 ) ,将 会 出 
现 如 图 6-37 所 示 的 对 话 框 。 

在 其 中 选择 图 6-37 定义 的 图 案 , 在 图 像 中 的 平 
铺 效 果 如 图 6-38 所 示 。 

如 果 未 选中 “图 案 填 充 ” 对 话 框 中 的 “与 图 层 链 
接 ” 复 选 框 ,那么 填充 的 图 案 就 不 能 像 普通 图 层 那 样 

图 6-37 进行 移动 。“ 贴 紧 原 点 ”功能 可 以 让 图 案 与 标尺 中 的 
0 点 对 齐 。 

上 面 这 个 图 案 平 铺 后 产生 的 是 一 种 “ 砌 墙 ”的 效果 , 即 看 得 出 一 块 一 块 图 案 的 拼接 ,图 案 
间 有 明显 的 分 界线 ,就 好 像 用 砖头 砌 墙 一 样 。 现 在 我 们 选择 Photoshop 默认 图 案 中 的 “分 
子 ”, 平 铺 效果 如 图 6-39 所 示 。 不 同 于 之 前 ,在 这 个 平 铺 中 看 不 到 图 案 间 的 边界 线 ,整个 图 
案 浑然 一 体 。 

这 是 为 什么 呢 ? 是 不 是 因为 这 个 图 案 本 身 很 大 ,以 至 于 比 目 前 图 像 的 画布 还 大 ,所 以 看 


不 到 平 铺 的 图 案 边 界 呢 ? 不 是 这 样 的 ,无 论 你 建立 多 大 的 图 像 ,都 不 会 看 到 图 案 边 界 。 那 究 
竞 是 为 什么 呢 ? 
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图 6-38 图 6-39 


现在 我 们 新 建 一 个 120 120 的 白 底 图 像 ,然后 建立 一 个 萎 形 渐变 填充 层 ( 黑 色 至 透 
明 ), 设 定 如 图 6-40 所 示 ,产生 的 效果 如 图 6-41 所 示 。 然 后 将 该 层 栅 格 化 (图 层 一 栅 格 化 一 
填充 内 容 /图 层 ) ,把 萎 形 移动 到 最 左 端 并 只 保留 一 半 , 复 制 菱形 图 层 再 水 平 ( 按 住 Shift fe) 
移动 到 右 端 且 也 只 保留 一 半 , 如 图 6-42 所 示 。 将 其 定义 为 图 案 。 


图 6-41 图 6-42 


现在 ,在 脑 中 想象 一 下 ,把 这 个 图 案 进 行 平 铺 的 效果 将 是 怎样 ? 
接着 动手 制作 , 平 铺 的 效果 如 图 6-43 所 示 ,我 们 发 现 原先 被 拆散 的 萎 形 又 被 合并 在 一 
起 了 。 和 你 们 想象 中 的 是 否 一 致 ? 
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从 严格 意义 上 来 说 ,图 案 的 边界 是 存在 的 。 但 从 视觉 
效果 上 看 却 没有 边界 。 正 因为 图 案 内 容 前 后 衔接 。 这 
样 的 图 案 就 适合 用 以 连续 平 铺 (也 称 无 颖 平 铺 、 连 续 图 
6-44 案 ), 可 以 “星火 煤 原 ”, 用 较 小 的 图 案 来 制作 较 大 的 区 

域 , 且 无 论 区 域 大 或 者 小 ,都 不 会 影响 平 铺 的 整齐 性 。 

这 种 图 案 在 网 页 设计 中 是 经 常用 到 的 ,因为 网 页 的 大 小 并 不 是 固定 的 , 随 着 内 容 的 
增 减 可 能 随时 发 生变 化 。 比 如 原先 网 页 中 只 有 20 行文 字 , 我 们 根据 这 20 行 的 大 小 制 
作 了 背景 ,但 以 后 如 果 文字 增加 为 30 行 , 那 空余 出 来 的 部 分 怎么 办 ? 因此 网 页 背景 都 
是 采用 一 个 较 小 的 图 案 , 然 后 指定 为 平 铺 。 这 样 无 论 网 页 内 容 增加 或 者 减少 都 不 会 影 
响 背 景 的 效果 。 

即使 网 页 内 容 不 发 生 增 减 ,浏览 器 窗口 宽度 减少 ,也 会 引起 高 度 的 增加 ,因为 这 样 才 能 
够 保证 总 面积 不 变 以 显示 原先 的 内 容 。 

那 不 改 变 浏 览 器 大 小 不 就 没 问 题 了 吗 ? 不 是 的 ,首先 你 不 可 能 强制 浏览 者 不 去 改变 浏 
览 器 窗口 的 大 小 。 其 次 不 同 浏览 者 所 用 的 显示 器 分 辩 率 设 定 也 可 能 不 一 样 。 我 们 在 1024X 
768 屏幕 分 辨 率 下 制作 的 充满 画面 的 网 页 ,如 果 在 800 > 600 的 显示 器 上 显示 ,即使 浏览 器 
窗口 最 大 化 ,宽度 也 不 可 避免 地 减少 。 


正 因为 图 案 的 连续 平 铺 特性 ,前 一 个 图 案 与 后 一 
4 个 图 案 首 尾 相 接 ,( 见 图 6-44) 才 能 够 形成 这 样 的 效果 。 


6.4.2 无 缝 平 铺 图 案 深度 分 析 


现在 我 们 来 仔细 分 析 一 下 刚才 定义 的 萎 形 图 案 ,为 什么 它 能 够 无 缝 平 铺 呢 ? 因为 在 图 
案 最 左 端的 1 像素 部 分 ,与 图 案 最 右 端 的 1 像素 部 分 有 良好 的 像素 承接 关系 。 这 种 承接 关 
系 体现 在 位 置 和 颜色 上 。 我 们 可 以 据 此 来 推断 ,用 一 条 线段 来 作为 图 案 的 话 : 

(1) 线段 的 两 个 端点 分 别 位 于 图 案 的 左右 边界 , 且 处 在 同一 水 平 线 上 ,那么 这 条 线段 的 
平 铺 效 果 最 好 ,首尾 相连 ,可 以 形成 无 颖 平 铺 。 

(2) 线段 的 两 个 端点 都 没有 或 只 有 一 个 到 达 边 界 ,那么 平 铺 效果 其 次 ,首尾 虽 不 能 相 
连 , 却 也 不 会 产生 断 接 感 。 

(3) 线段 的 两 个 端点 分 别 位 于 图 案 的 左右 边界 ,但 不 在 同一 水 平 线 上 ,那么 平 铺 效 果 最 
差 , 因 为 首尾 既 不 能 相连 ,又 产生 了 断 接 感 。 

上 文 所 述 分 别 对 应 图 6-45 中 的 3 种 效果 范例 。 


头 尾 相连 好) — ERA М XZ — Z — 


头 尾 留 空 次 ) | 二 | 中 一 站 


ЕНН) М ММММ 


图 6-45 


上 面 所 说 的 第 一 种 平 铺 ,其 实 还 要 一 种 例外 的 可 能 性 : 如 果 线 段 穿越 边界 时 候 呈 现 一 
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定 的 角度 (常见 于 曲线 ) ,那么 位 于 分 界 点 的 两 个 像素 ( 见 图 6-46 中 的 A 与 B) 即 使 不 在 同一 
水 平 线 上 , 却 同样 能 够 形成 无 颖 平 铺 。 因 为 它们 之 间 的 落差 符合 线段 的 走势 。 这 样 的 差异 
通常 也 就 是 1 到 2 像素 的 距离 ,再 大 就 会 产生 断 接 感 了 。 

除了 位 置 ,边界 像素 的 颜色 对 于 平 铺 效 果 也 是 有 影响 的 。 这 常见 于 使 用 渐变 色 作为 平 
铺 的 时 候 。 为 了 使 效果 明显 ,我 们 使 用 了 模拟 渐变 的 色 块 ,并 打上 颜色 数字 来 说 明 问题 ,如 
图 6-47 所 示 。 


к? E JE GE GRE ЖШ 
E. I-E.. Ж. Ж jla E.. 


图 6-46 图 6-47 


如 果 头 尾 颜 色相 同 ,颜色 相 接 会 产生 一 个 重复 的 区 域 , 使 得 颜色 1 在 平 铺 中 的 比例 两 倍 
于 其 他 颜色 ,造成 不 协调 。 当 减 去 其 中 一 个 后 ,颜色 的 过 渡 就 协调 了 。 这 可 以 从 数字 的 变化 
上 看 出 来 。 

不 过 如 果 渐 变 图 案 中 的 颜色 数量 较 多 或 所 占 区 域 较 小 (如 颜色 只 有 1 像素 宽 ) ,这 种 重 
复 的 效果 就 不 容易 被 觉察 ,也 就 不 必 过 于 苛求 。 

头 尾 重 复 的 情况 也 会 出 现在 动画 制作 中 ,图 6-48 所 示 是 一 个 顺 时 针 旋 转 箭 头 的 动画 过 
程 ,每 帧 的 停留 时 间 为 1 秒 。 注 意 第 1 帧 与 第 9 帧 的 箭头 角度 相同 ,这 样 在 播放 的 时 候 , 箭 
头 在 这 个 角度 就 会 停留 2 秒 , 看 起 来 就 好 像 顿 了 一 下 似 的 ,造成 动画 的 不 连贯 。 


前 面 我 们 所 制作 的 无 缝 平 铺 图 案 又 称 为 2 方 连续 图 案 , 因 为 只 考虑 到 了 横向 或 竖 向 (所 
有 例子 旋转 90" 即 是 ) 平 铺 的 需要 。 这 样 的 图 案 在 填充 大 面积 的 区 域 时 会 显得 很 单调 。 下 
面 我 们 就 来 看 看 如 何 制 作 4 方 连续 图 案 , 这 并 不 困难 ,就 是 把 两 个 方向 
结合 起 来 考虑 而 已 。 
在 第 一 个 萎 形 的 基础 上 ,我 们 再 创建 一 个 30%% 左 右 的 小 菱形 渐变 ， 
按照 前 面相 同 的 手法 处 理 成 如 图 6-49 所 示 的 样子 。 尽 管 很 简陋 ,但 这 
就 是 一 个 真正 的 4 方 连续 图 案 了 。 平 铺 效果 如 图 6-50 所 示 。 
在 制作 这 个 图 案 的 时 候 ,大 家 最 感到 没有 把 握 的 是 让 菱形 在 边界 正 图 6-49 
好 保留 一 半 大 小 ,这 个 过 程 中 稍 有 误差 就 会 造成 平 铺 图 案 断 接 。 所 幸 葵 
形 具 有 很 明显 的 棱 边 可 提供 视觉 参考 。 但 对 于 一 些 其 他 的 形状 就 未 必 能 够 准确 把 握 了 。 
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.9.9.9 
+++ 


图 6-50 


6.4.3 用 Photoshop “位 移 滤 镜 ” 制 作 平 铺 图 案 


为 了 准确 和 快捷 地 制作 平 铺 图 案 , 可 以 使 用 Photoshop 的 位 移 滤 镜 。 让 我 们 先 制作 出 
早先 的 那个 大 萎 形 并 栅 格 化 ,确保 选择 该 层 ,然后 选择 * 滤 镜 ”* 其 他 ”位 移 ” 命 令 , 设 置 
如 图 6-51 所 示 ,注意 要 选择 * 折 回 ”, 就 会 在 图 像 中 看 到 我 们 之 前 手动 复制 图 层 并 移动 到 边 
界 的 效果 。 那 这 个 位 移 滤 镜 是 什么 原理 呢 ? 

位 移 滤 镜 在 “ 折 回 ”方式 下 就 是 假定 图 像 已 经 作为 图 案 并 进行 了 平 铺 ,如 图 6-52 所 示 ， 


像 蔡 换 原先 的 图 像 。 
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图 6-51 图 6-52 
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我 们 这 个 图 像 的 尺寸 是 120X120 ,那么 按照 左 图 的 设置 水 平移 动 60( 或 一 60) 像 素 ,就 
相当 于 横向 移动 一 半 ,应 该 停留 在 下 右 图 的 蓝 色 区 域内 ,正好 是 左右 各 端 露出 菱形 的 一 半 。 
可 以 预见 ,如 果 垂 直 也 设 为 60( 或 一 60) 像 素 的 话 , 所 得 到 的 应 该 是 下 右 图 绿色 区 域内 的 
图 像 。 

在 完成 大 菱形 的 水 平 位 移 后 ,再 建立 并 栅 格 化 一 个 小 萎 形 渐变 层 , 然 后 进行 60 (或 
一 60) 像 素 垂 直 位 移 ,就 可 以 得 到 与 之 前 相同 的 效果 。 使 用 滤 镜 前 注意 正确 选择 图 层 。 

掌握 了 位 移 滤 镜 的 使 用 后 ,我 们 就 可 以 很 容易 地 制作 无 颖 平 铺 图 案 了 。 新 建 一 个 60 x 
60 的 图 像 ,新 建 一 个 图 层 , 使 用 自 定 义 形 状 工具 (UVShift 十 U 键 ) 在 其 中 绘制 * 草 2” 形 状 ( 如 
找 不 到 可 复位 形状 ) ,将 其 与 背景 层 上 下 居中 ,左右 居中 对 齐 (要 以 背景 层 作 为 基准 层 ) ,然后 
复制 该 层 (选择 图 层 后 按 Ctrl 十 键 ) ,对 复制 出 来 的 图 层 (或 原 图 层 ) 使 用 位 移 滤 镜 ,水 平 及 
垂直 方向 均 设 为 图 像 大 小 的 一 半 (30 或 一 30 像素 ) 。 得 到 如 图 6-53 左 图 所 示 的 效果 ,可 将 
图 案 的 名 字 起 为 “紫色 小 草 之 类 的 。 填 充 效果 如 图 6-53 右 图 所 示 。 
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图 6-53 


我 们 知道 平 铺 的 效果 关键 取决 于 图 案 边 界 , 因 此 首先 要 保证 图 案 边 界 的 连续 性 。 现 在 
我 们 来 制作 较为 杂乱 的 可 平 铺 背 景 , 首 先 设 置 笔 刷 参数 : 散布 枫叶 形状 、 直 径 30 像素 .间距 
80% 、 大 小 拌 动 100% 、 角 度 拌 动 10026 EAE 10026 。 

一 个 彩色 前 景色 (不 能 选择 黑白 或 灰 度 ,否则 没有 色相 抖动 效果 ) ,在 一 个 180X150 
的 图 像 中 绘制 一 个 十 字形 ,注意 枫叶 不 能 超出 边界 ,原则 上 是 越 贴 紧 边界 越 好 ,但 这 里 先 不 
用 强求 ,后 面 有 办 法 来 弥补 。 

然后 将 图 案 垂 直 位 移 一 半 ( 也 就 是 75 像素 ) ,这 样 就 会 露出 原先 在 上 下 边界 留 下 的 空 
白 。 用 相同 的 笔 刷 填补 空白 处 。 

接着 水 平 、 垂 直 位 移 各 一 半 ,就 会 露出 原先 在 左右 边界 留 下 的 空白 , 同 画 笔 填 补 。 最 后 
再 垂直 位 移 一 半 , 即 可 得 到 可 作为 无 颖 平 铺 图 案 的 边缘 。 

以 上 步骤 如 图 6-54 所 示 。 其 中 的 步骤 2 和 步骤 6 可 以 互 换 , 也 就 是 说 可 以 先 填补 水 平 
方向 再 填补 垂直 方向 。 

在 得 到 具有 可 无 颖 平 铺 边 缘 的 图 案 后 ,最 重要 的 步骤 就 完成 了 。 接 下 来 可 在 中 间 的 空白 
区 域 随意 添加 一 些 图 像 ,但 必须 保证 添加 的 图 像 不 能 超出 边界 .如 图 6-54 最 后 一 幅 图 所 示 。 

滤 镜 是 作用 于 单个 图 层 的 ,可 以 利用 这 个 特性 来 添加 更 多 的 平 铺 效果 。 如 将 前 景色 设 
为 黑 ,将 笔尖 形状 改 为 “沙丘 草 ” ,取消 色相 抖动 (由 于 前 景色 为 纯 黑 ,属于 灰 度 色 ,而 改变 色 
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图 6-54 


相对 灰 度 色 是 无 效 的 ,因此 即使 不 取消 这 一 项 目 也 不 会 造成 色彩 的 偏离 ) ,适当 增 大 直径 ,其 
余 笔 刷 参 数 不 变 。 

新 建 图 层 , 在 中 间 画 一 些 草 ( 不 要 超出 边界 ) ,然后 进行 水 平 与 垂直 位 移 ( 各 5000). HE 
在 中 间 空 余 出 来 的 地 方 随手 画 几 下 (不 要 超出 边界 ) ,完成 后 效果 如 图 6-55 左 图 (隐藏 了 其 
他 图 层 ) 。 

为 什么 这 里 不 采用 之 前 “紫色 小 草 ” 那 样 ,将 复制 出 来 的 图 层 进行 位 移 呢 ?这 是 因为 “ 紫 
色 小 草 ” 需 要 图 案 的 一 致 性 ,而 我 们 这 里 要 避免 一 致 性 。 

将 新 的 沙丘 草图 案 层 反 相 (Ctrl 十 D) 以 得 到 白色 .然后 置 于 原先 图 案 的 上 层 , 就 可 以 形 
成 如 图 6-55 右 图 所 示 的 效果 了 。 平 铺 效果 如 图 6-56 所 示 。 
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可 能 有 的 人 会 问 , 那 为 什么 一 开始 不 使 用 白色 去 画 沙 丘 草 呢 ? 这 是 因为 对 这 个 图 像 的 
背景 而 言 , 用 白色 绘制 沙丘 草 不 容易 辨别 边界 是 否 超出 ,因此 先 使 用 黑色 。 

做 到 这 里 ,特别 是 看 到 图 6-56 所 示 的 透明 沙丘 草 层 时 ,大 家 有 没有 想到 一 个 问题 : 能 
不 能 定义 半 透明 的 图 案 呢 ? | 

答案 是 肯定 的 ,Photoshop 支持 带 有 Alpha 通道 P” w" м 
的 图 案 , 如 果 大 家 在 前 面 的 制作 中 都 是 将 图 案 绘制 在 | 
新 建 图 层 上 ,那么 隐藏 背景 层 后 定义 图 案 就 可 以 得 到 е. 
透明 的 效果 。 如 图 6-57 左 图 所 示 。 还 可 以 将 沙丘 草 ES ЖЕР wanns 
图 案 层 作为 选区 ,给 现 有 的 枫叶 层 再 添加 一 个 莹 版。 C Sab sad САФАР 

图 6-57 

方法 是 按 Ctrl 键 同 时 单 击 图 层 缩 览 图 ,将 沙丘 草 层 转 
为 选区 ,然后 选择 枫叶 层 , 选 择 “图 层 ” 一 “添加 图 层 蒙 版 "一 “隐藏 选区 ”命令 则 可 做 出 如 图 
6-57 右 图 所 示 的 效果 。 大 家 可 以 自己 找 张 图 片 来 看 看 半 透明 图 案 的 平 铺 效果 。 

现在 我 们 对 使 用 位 移 滤 镜 制 作 连 续 平 铺 图 案 的 注意 事项 作 一 个 总 结 : 

CD 初期 的 图 案 应 大 体 绘制 于 图 像 的 中 央 部 分 。 这 样 使 用 位 移 滤 镜 时 , 取 宽 高 一 半 的 
数值 , 即 可 令 对 边 图 案 互相 衔接 。 否 则 需要 依靠 视觉 判断 位 移 距离 。 

(2) 初期 绘制 的 图 案 不 能 超出 画布 ,否则 一 定 产生 断 接 。 特 别 是 使 用 具有 随机 动态 效 
果 ( 直 径 、 圆 度 .散布 等 ) 的 笔 刷 时 尤为 注意 。 

(3) 位 移 滤 镜 中 需要 移动 的 距离 为 图 像 尺寸 的 一 半 ( 以 上 第 1 点 成 立时 ) 。 不 必 过 分 精 
确 ,只 要 对 边 互 有 图 案 即 可 。 如 果 图 像 非 正方 形 , 则 要 分 别 取 其 宽度 和 高 度 一 半 的 数值 。 

(4) 分 层 制作 可 产生 多 重 图 案 , 位 移 滤 镜 只 对 目前 所 选 图 层 有 效 。 但 如 果 有 选区 存在 ， 
则 位 移 滤 镜 只 会 改变 选区 内 的 图 像 。 


6.4.4 ”常用 无 颖 拼接 图 案 的 制作 方法 


下 面 我 们 来 学 习 一 些 常 用 图 案 的 制作 方法 ,首先 是 扫描 线 ( 也 称 电视 扫 描 线 或 TV 扫描 
线 )。 如 图 6-58 的 左上 图 是 原 图 ,右上 图 是 添加 了 扫描 线 后 的 效果 。 扫 描 线 实际 上 就 是 由 
若干 条 横 线 组 成 的 ,那么 我 们 所 定义 的 图 案 就 要 能 够 产生 如 图 6-58 的 下 图 这 样 的 直线 平 铺 
效果 。 

这 样 的 图 案 该 如 何 去 定 义 呢 ? 如 图 6-59 左 图 所 示 ,新 建 一 个 1X2 的 透明 图 像 ,将 其 放 
大 到 最 大 ,然后 通过 选区 将 其 下 方 (或 上 方 ) 填 为 黑色 。 这 个 图 案 就 制作 完成 了 。 注 意 在 定 
义 为 图 案 的 时 候 要 取消 选区 (Ctrl 十 D)。 是 不 是 觉得 很 简单 ? 大 家 在 脑 中 模拟 一 下 这 个 图 
案 的 平 铺 效果 就 会 明白 这 样 做 是 正确 的 。 

那么 ,如 果 我 们 将 图 案 绘 制 成 如 图 6-59 右 图 那样 ,会 有 什么 区 别 呢 ? 没有 区 别 , 在 使 用 
定义 图 案 功能 的 时 候 ,Photoshop 会 自动 检测 图 案 中 的 重复 区 域 并 将 其 删除 ,我 们 最 终 将 得 
到 与 图 6-59 左 图 一 样 的 图 案 。 

利用 这 个 图 案 建 立 一 个 图 案 填充 层 , 将 不 透明 度 设 为 20% 左 右 ,混合 模式 改 为 “ 释 加 ” 
就 可 以 得 到 前 面 的 扫描 线 效果 了 。 如 果 增 大 调整 图 案 填充 层 中 的 缩放 比例 ,就 可 以 得 到 较 
粗 的 扫描 线 。 但 记 住 ,由 于 图 案 属 于 点 阵 图 像 , 因 此 这 样 放 大 后 会 导致 模糊 。 

如 果 要 得 到 清晰 的 较 粗 线条 ,可 以 按照 如 图 6-60 中 图 那样 定义 图 案 , 建 立 1X3 的 透明 
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图 6-58 


图 像 ,并 将 其 中 的 2/3 填 为 黑色 ,这 样 就 得 到 2 倍 粗 的 线条 了 。 如 果 想 增加 线条 的 间隔 ,就 
将 1X3 透明 图 像 的 1⁄3 填 为 黑色 ,如 图 6-60 中 图 所 示 。 更 粗 或 间隔 更 大 的 扫描 线 都 可 参 
照 这 个 方法 制作 。 

也 可 以 尝试 使 用 其 他 灰 度 色 或 彩色 来 制作 扫描 线 , 如 图 6-60 右 图 所 示 。 看 看 会 有 怎样 
的 效果 。 在 应 用 具有 灰 度 色 或 彩色 图 案 的 时 候 , 可 以 尝试 其 他 的 图 层 混 合 模式 。 

如 果 要 制作 竖 直 线条 ,定义 的 方法 和 上 面 是 基本 相同 的 ,这 里 就 不 再 介绍 。 

如 果 是 定义 斜 线 , 可 参照 如 图 6-61 的 左 图 和 右 图 ( 均 放大 为 1600 4 ,实际 每 一 个 方块 为 
1 像素 )。 左 边 的 斜 线 平 铺 后 较 密集 而 右 方 的 相对 朴 松 。 为 什么 不 使 用 2X2 的 图 像 来 定义 
和 斜 线 呢 ? 因 为 2x2 的 尺寸 太 小 ,制作 出 来 的 斜 线 实际 上 成 了 网 点 效果 ,大 家 可 以 想象 并 自 


己 动手 做 做 看 。 
ZZ ы 
соу: Ns 
图 6-59 图 6-60 图 6-61 


图 6-62 左 图 是 将 最 初 定义 的 扫描 线 放 大 为 400% 的 效果 。 图 6-62 中 图 是 使 用 了 彩色 
线条 图 案 并 更 改 混合 模式 为 “颜色 ”的 效果 。 图 6-62 右 图 是 斜 线 图 案 的 效果 。 

除了 线条 以 外 ,网 格 与 网 点 也 是 经 常用 到 的 .对 于 网 格 掌握 一 个 诀 穿 一 一 使 用 十 字形 
十 字 越 小 网 格 越 密 集 ,十 字 越 大 网 格 越 踊 松 ; 而 十 字 的 粗细 影响 网 格 边缘 的 粗细 。 掌 握 了 这 
些 就 很 容易 定义 均匀 的 网 格 图 案 。 如 图 6-63 的 左 图 和 中 图 (1600%) 所 示 。 图 6-63 右 图 的 
网 格 不 透明 度 为 20% ,使 用 了 “ 变 亮 "混合 模式 。 


147 


第 6 章 H] Photoshop 优化 Web 页 


如 果 要 定义 不 均匀 的 网 格 , 那 就 用 一 种 干 字形 (或 土 字形 )。 如 图 6-64 4 E (160026) 07 
示 。 按 照 这 种 思路 扩展 出 去 ,可 以 将 任意 的 水 平和 垂直 线段 作为 图 案 , 如 图 6-64 右 图 


(1600%) 所 示 。 
TIE FH 


图 6-63 6-64 


定义 网 点 图 案 实际 上 和 网 格 差不多 。 区 别 在 于 网 格 的 线条 是 连续 的 ,而 网 点 是 不 连续 
的 。 如 图 6-65 的 左 图 和 中 图 (1600%) 是 最 典型 的 网 格 图 案 。 制 作 这 类 网 点 的 诀窍 就 在 于 : 
定义 奇数 宽度 的 正方 形 图 案 , 在 中 间 区 域 填充 黑色 。 如 果 定 义 非 正方 形 的 图 案 , 则 可 以 在 水 
平和 垂直 方向 形成 不 均匀 的 平 铺 。 

如 果 有 时 候 需 要 图 案 的 第 一 个 网 点 精确 对 应 图 像 的 左上 角 ,可 将 位 于 正方 形 的 左上 角 的 
那个 像素 填 上 黑色 ,如 图 6-65 右 图 (1600%) 所 示 。 它 的 平 铺 效 果 与 图 6-65 中 图 是 相同 的 。 

网 点 与 网 格 仅 一 步 之 遥 , 如 图 6-66 的 左 图 和 中 图 (500%) 所 示 , 它 就 综合 了 网 格 与 网 点 
的 特征 。 当 然 我 们 也 可 以 定义 如 图 6-66 右 图 (500% ) 所 示 的 斜 线 网 格 。 
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图 6-65 图 6-66 


大 家 会 看 到 我 们 所 定义 的 扫描 线 、 网 点 和 网 格 大 都 是 黑色 的 , 那 如 果 有 时 候 需要 改变 它 
们 的 颜色 该 如 何 做 呢 ? 难道 都 要 用 新 颜色 重新 定义 图 案 ? 在 这 里 考察 一 下 大 家 对 色彩 调整 
部 分 的 掌握 程度 : 如 何 将 灰 度 色 变 为 彩色 ? 

虽然 我 们 知道 了 方法 ,但 在 这 里 操作 起 来 会 发 现 有 问题 : 无 法 对 图 案 填 充 层 进行 色相 
调整 。 这 是 由 于 这 类 特殊 图 层 是 无 法 应 用 色彩 调整 的 。 解 决 的 方法 有 两 个 : 

CD 将 图 案 填 充 层 机 格 化 , 即 点 阵 化 。 方 法 是 选择 “图 层 ” 一 “ 栅 格 化 ”一 “图 层 ” 命 令 或 
在 图 层面 板 中 右键 单 击 填充 图 层 选 择 * 栅 格 化 ”命令 。 栅 格 化 后 的 图 层 就 可 以 直接 应 用 各 种 
色彩 调整 了 。 这 种 方法 虽然 简单 ,但 弊端 也 是 显而易见 的 , 那 就 是 失去 了 特殊 图 层 灵 活 的 可 
编辑 性 。 

(2) 使 用 “专属 色彩 调整 图 层 ” 来 改变 颜色 。 如 图 6-67 所 示 ,原先 黑色 的 线条 被 色相 / 
饱和 度 调 整 为 了 绿色 。 如 果 不 指定 为 专属 调整 层 的 话 ,色相 调整 就 会 对 之 下 的 背景 层 也 造 
成 影响 。“ 专 属 色 彩 调整 层 ” 实 际 上 就 是 建立 剪贴 蒙 版 。 

mofe 同志 
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图 6-67 


此 外 ,也 可 以 使 用 纯色 填充 层 来 改变 线条 的 颜色 。 相 比 使 用 色相 调整 层 , 使 用 纯色 填充 
层 在 选 色 上 更 直观 ,将 其 与 图 案 层 组 成 粘贴 蒙 版 后 填充 效果 就 只 对 图 案 层 有 效 , 如 
图 6-68 所 示 。 

注意 使 用 这 种 颜色 填充 方式 有 一 个 前 提 , 那 就 是 所 使 用 的 图 案 必 须 是 背景 透明 的 ,这 样 
颜色 填充 就 只 会 针对 图 案 中 有 像素 存在 的 部 分 有 效 。 否 则 颜色 填充 将 充满 整个 画面 。 
图 案 层 也 可 以 配合 蒙 版 来 使 用 ,如 图 6-69 使 用 了 两 个 图 案 填充 层 ,并 用 画笔 涂抹 蒙 版 
以 控制 图 案 在 画面 上 的 分 布 。 此 外 ,在 图 层 样式 中 使 用 图 案 也 是 很 普遍 的 。 
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6.5 图 层 样式 在 网 页 中 的 运用 


6.5.1 图 层 样式 详解 


图 层 样式 在 网 页 中 得 到 广泛 应 用 ,其 中 图 层 样 式 可 分 为 以 下 几 种 模式 : 

1. Normal 模式 

因为 在 Photoshop 中 颜色 是 当 作 光 线 处 理 的 (而 不 是 物理 颜料 ) ,在 Normal 模式 下 形成 的 
合成 或 着 色 作 品 中 不 会 用 到 颜色 的 相 减 属性 。 例 如 ,在 Normal 模式 下 ,100% 不 透明 红色 与 
50% 不 透明 蓝 色 混合 产生 一 种 淡 紫 色 , 而 不 是 混合 物理 颜料 时 所 期 望 得 到 的 深 紫色 。 当 增 大 
蓝 色 选择 的 不 透明 度 时 ,结果 颜色 变 得 更 蓝 而 不 太 红 , 直 到 100% 不 透明 度 时 蓝 色 变 成 了 组 合 
颜色 的 颜色 。 用 Paintbrush I 具 以 50% 的 不 透明 度 把 蓝 色 涂 在 红色 区 域 上 结果 相同 ;在 红色 
区 域 上 描画 得 越 多 ,就 有 更 多 的 蓝 色 前 景色 变 成 区 域内 最 终 的 颜色 。 于 是 ,在 Normal 模式 下 ， 
永远 也 不 可 能 得 到 一 种 比 混合 的 两 种 颜色 成 分 中 最 暗 的 那个 更 暗 的 混合 色 了 。 

2. Dissolve 模式 

Dissolve 模式 当 定义 为 层 的 混合 模式 时 ,将 产生 不 可 须知 的 结果 。 因 此 ,这 个 模式 最 好 
是 同 Photoshop 中 的 着 色 应 用 程序 工具 一 同 使 用 。Dissolve 模式 采用 100% 不 透明 的 前 景 
色 ( 或 采样 的 像素 , 当 与 Rubber Stamp 工具 一 起 使 用 时 ), 同 底层 的 原始 颜色 交替 以 创建 一 
种 类 似 扩 散 拌 动 的 效果 。 在 Dissolve 模式 中 通常 采用 的 颜色 或 图 像样 本 的 不 透明 度 越 低 ， 
颜色 或 样本 同 原 始 图 像 像素 散布 的 频率 就 越 低 。 如 果 以 小 于 或 等 于 50% 的 不 透明 度 描 夯 
一 条 路 径 ,Dissolve 模式 在 图 像 边缘 周围 创建 一 个 条 纹 。 这 种 效果 对 模拟 破损 纸 的 边缘 或 
原 图 的 * 泼 溅 ?类 型 是 重要 的 。 

3. Behind 模式 

这 种 混合 模式 在 着 色 应 用 程序 工具 中 能 得 到 ,但 不 用 于 合成 层 的 属性 。 在 Behind 模式 
中 ,只 能 在 层 上 的 透明 和 部 分 透明 区 域 上 着 色 ,完全 不 透明 的 像素 在 此 模式 下 不 受 影响 。 在 
Behind 模式 下 ,可 达到 填充 层 内 容 中 间隙 的 效果 .或 把 前 景色 (或 利用 Rubber stamp 工具 
时 的 采样 图 像 ) 应 用 到 一 张 乙酸 纤维 介质 的 背面 。 

4. Clear 模式 

Clear 模式 类 似 于 擦 除 层 上 不 透明 区 域 的 效果 。 这 种 模式 不 能 应 用 到 一 个 层 ,只 有 
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Stroke 命令 ,Fill 命令 以 及 Paint Bucket 工具 能 清除 一 个 层 上 的 像素 。 用 户 可 能 始终 没 必 
要 访问 Clear 模式 ,因为 用 Eraser 工具 和 Photoshop 的 许多 掩 膜 功 能 就 能 执行 等 价 的 编辑 
工作 (并 带 有 更 可 预知 的 结果 ) 。 

5. Multiply 模式 

这 种 模式 可 用 来 着 色 并 作为 一 个 图 像 层 的 模式 。Multiply 模式 从 背景 图 像 中 减 去 源 材 
料 ( 不 论 是 在 层 上 着 色 还 是 放 在 层 上 ) 的 亮度 值 , 得 到 最 终 的 合成 像素 颜色 。 在 Multiply 模 
式 中 应 用 较 淡 的 颜色 对 图 像 的 最 终 像 素颜 色 没 有 影响 。Multiply 模式 模拟 阴影 是 很 棒 的 。 
现实 中 的 阴影 从 来 也 不 会 描绘 出 比 源 材 料 ( 阴 影 ) 或 背景 (获得 阴影 的 区 域 ) 更 淡 的 颜色 或 色 
调 的 特征 。 

6. Screen 模式 

Screen 模式 是 Multiply 的 反 模 式 。 无 论 在 Screen 模式 下 用 着 色 工 具 采 用 一 种 颜色 ,还 
是 对 Screen 模式 指定 一 个 层 , 源 图 像 同 背景 合并 的 结果 始终 是 相同 的 合成 颜色 或 一 种 更 淡 
的 颜色 。 此 屏幕 模式 对 于 在 图 像 中 创建 需 虹 辉 光 效 果 是 有 用 的 。 如 果 在 层 上 围绕 背景 对 象 
的 边缘 涂 了 白色 (或 任何 淡 颜 色 ) ,然后 指定 层 Screen 模式 ,通过 调节 层 的 opacity 设置 就 能 
获得 亿 满 或 稀薄 的 辉 光 效果 。 

7. Overlay 模式 

这 种 模式 以 一 种 非 艺术 逻辑 的 方式 把 放置 或 应 用 到 一 个 层 上 的 颜色 同 背 景色 进行 混 
合 ,然而 , 却 能 得 到 有 趣 的 效果 。 背 景 图 像 中 的 纯 黑 色 或 纯 白 色 区 域 无 法 在 Overlay 模式 下 
显示 层 上 的 Overlay 着 色 或 图 像 区 域 。 背 景区 域 上 落 在 黑色 和 白色 之 间 的 亮度 值 同 
Overlay 材料 的 颜色 混合 在 一 起 ,产生 最 终 的 合成 颜色 。 为 了 使 背景 图 像 看 上 去 好 像 是 同 
设计 或 文本 一 起 拍摄 的 ,Overlay 可 用 来 在 背景 图 像 上 画 上 一 个 设计 或 文本 。 

8. Soft Light 模式 

Soft Light 模式 根据 背景 中 的 颜色 色调 ,把 颜色 用 于 变 暗 或 加 亮 背景 图 像 。 例 如 ,如 果 
在 背景 图 像 上 涂 了 50 26 8 6 ,这 是 一 个 从 黑色 到 白色 的 梯度 , 那 着 色 时 梯度 的 较 暗 区 域 变 
得 更 暗 ,而 较 亮 区 域 呈现 出 更 亮 的 色调 。 

9. Hard Light 模式 
除了 根据 背景 中 的 颜色 而 使 背景 色 是 多 重 的 或 屏蔽 的 之 外 ,这 种 模式 实质 上 同 Soft 
Light 模式 是 一 样 的 。 它 的 效果 要 比 Soft Light 模式 更 强烈 一 些 , 同 Overlay 一 样 ,这 种 模 
式 也 可 以 在 背景 对 象 的 表面 模拟 图 案 或 文本 。 
10. Color Dodge 模式 
除了 指定 在 这 个 模式 的 层 上 边缘 区 域 更 尖锐 ,以 及 在 这 个 模式 下 着 色 的 笔画 之 外 ， 
Color Dodge 模式 类 似 于 Screen 模式 创建 的 效果 。 另 外 ,不 管 何 时 定义 Color Dodge 模式 
混合 前 景 与 背景 像素 ,背景 图 像 上 的 暗 区 域 都 将 会 消失 。 
11. Color Burn 模式 
除了 背景 上 的 较 淡 区 域 消失 , 且 图 像 区 域 呈 现 尖 锐 的 边缘 特性 之 外 ,这 种 Color Burn 
模式 创建 的 效果 类 似 于 由 Multiply 模式 创建 的 效果 。 

12. Darken 模式 

在 此 模式 下 , 仅 采 用 了 其 层 上 颜色 (或 Darken 模式 中 应 用 的 着 色 ) 比 背景 颜色 更 暗 的 
这 些 层 上 的 色调 。 这 种 模式 导致 比 背 景 颜色 更 淡 的 颜色 从 合成 图 像 中 去 掉 。 
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13. Lighten 模式 

在 这 种 与 Darken 模式 相反 的 模式 下 , 较 淡 的 颜色 区 域 在 合成 图 像 中 占 主 要 地 位 。 在 
层 上 的 较 暗 区 域 ,或 在 Lighten 模式 中 采用 的 着 色 ,并 不 出 现在 合成 图 像 中 。 

14. Difference 模式 

Difference 模式 使 用 层 上 的 中 间 色 调 或 中 间 色 调 的 着 色 是 十 分 合适 的 。 这 种 模式 创建 
背景 颜色 的 相反 色彩 。 例 如 ,在 Difference 模式 下 , 当 把 蓝 色 应 用 到 绿色 背景 中 时 将 产生 一 
种 青绿 组 合 色 。 此 模式 适用 于 模拟 原始 设计 的 底片 ,而 且 尤 其 可 用 来 在 其 背景 颜色 从 一 个 
区 域 到 另 一 区 域 发 生变 化 的 图 像 中 生成 突出 效果 。 

15. Exclusion 模式 

这 种 模式 产生 一 种 比 Difference 模式 更 柔和 、 更 明亮 的 效果 。 无 论 是 Difference 还 是 
Exclusion 模式 都 能 使 人 物 或 自然 景色 图 像 产生 更 真实 或 更 吸引 人 的 图 像 合成 。 

16. Hue 模式 

在 这 种 模式 下 , 层 的 色 值 或 着 色 的 颜色 将 代 蔡 底层 背景 图 像 的 色彩 。Hue 模式 代替 了 
基本 的 颜色 成 分 但 不 影响 背景 图 像 的 饱和 度 或 亮度 。 

17. Saturation 模式 

此 模式 使 用 层 上 颜色 (或 用 着 色 工 具 使 用 的 颜色 ) 的 强度 (颜色 纯度 ), 且 根据 颜色 强度 
强调 背景 图 像 上 的 颜色 。 例 如 ,在 把 纯 蓝 色 应 用 到 一 个 灰暗 的 背景 图 像 中 时 , 显 出 了 背景 中 
的 原始 纯色 ,但 蓝 色 并 未 加 入 到 合成 图 像 中 。 如 果 选 择 一 种 中 性 颜色 (一 种 并 不 显示 主流 色 
度 的 颜色 ) ,对 背景 图 像 不 发 生 任何 变化 。Saturation 模式 可 用 来 显 出 图 像 中 颜色 强度 已 经 
由 于 岁月 变 得 灰暗 的 底层 颜色 。 


6.5.2 利用 图 层 样式 设计 个 性 化 网 页 界面 实例 


利用 图 层 样式 设计 个 性 化 网 页 界面 ,如 图 6-70 所 示 为 最 终 效果 图 片 。 
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图 6-70 
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) 新 建文 件 ,将 树木 素材 置 于 图 像 左 上 角 ,如 图 6-71 所 示 。 
(2) 使 用 圆 角 抑 形 工具 在 树 的 下 方 绘制 一 矩形 框 , 如 图 6-72 所 示 。 


一 


图 6-71 图 6-72 


(3) 绘制 其 他 矩形 内 容 框 ,如 图 6-73 所 示 。 
(4) 在 背景 层 上 方 创建 新 图 层 ,并 用 渐变 工具 填充 该 层 ,得 到 如 图 6-74 所 示 效 果 。 
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(5) 在 渐变 层 上 方 创建 新 图 层 , 选 择 云彩 笔 刷 (没有 此 笔 刷 请 上 网 搜索 下 载 ) ,添加 云彩 
效果 ,如 图 6-75 所 示 。 

(6) 选择 圆 角 和 矩形 工具 绘制 导航 按钮 (注意 将 按钮 层 置 于 棕色 内 容 框 下 方 ) ,如 图 6-76 
所 示 。 

CD 为 按钮 添加 图 层 样式 ,参数 设置 如 图 6-77 至 图 6-80 所 示 。 
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图 6-75 图 6-76 


[X] 图 层 样式 


图 6-78 
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图 6-80 


图 6-79 


得 到 如 图 6-81 效果 。 


图 6-81 


(8) 设置 棕色 内 容 框图 层 样式 ,参数 设置 如 图 6-82 至 图 6-86 所 示 o 
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图 6-83 


渐变 类 型 (T); 
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得 到 如 
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图 6-84 图 685 


6-87 所 示 效 果 。 
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(11) 创建 新 图 层 , 添 加 导航 符号 ,如 图 6-90 所 示 。 


习题 6 


6-1 图 片 优 化 的 基本 原则 是 什么 ? 

6-2 制作 Web 图 片 库 的 操作 步骤 是 什么 ? 

6-3 ”什么 是 “ 帧 >? 

64 使 用 位 移 滤 镜 制作 连续 平 铺 图 案 的 注意 事项 有 哪些 ? 
6-5 分 析 Soft Light 模式 和 Hard Light 模式 的 特点 。 
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本 章 知 识 点 

。 网 站 的 组 成 

。 网 站 的 分 类 

本 章 学 习 目标 

° 掌握 网 站 构成 的 基本 元 素 
。 掌握 网 站 基本 的 分 类 方法 


7.1 网 站 的 组 成 


所 谓 网 站 ,是 指 以 Web 应 用 为 基础 ,可 以 存放 信息 内 容 和 提供 信息 检索 或 商务 服务 的 
网 络 站 点 。 它 具有 的 特征 是 使 用 者 通过 浏览 器 就 可 以 获得 网 站 所 提供 的 丰富 资源 ,充分 享 
受 共 享 的 信息 与 服务 。 构 造 一 个 网 站 的 基本 组 成 部 分 包括 网 页 、 网 站 空间 、 网 址 和 域名 。 对 
于 刚 接触 网 站 的 人 来 说 ,应 当 首先 了 解 有 关 的 基本 概念 和 常用 的 专业 名 词 ,下 面 我 们 就 分 别 
加 以 介绍 。 


7.1.1 网 页 


网 页 (Web Page) ,是 网 站 中 的 一 “页 ”, 通 常 是 HTML 格式 (文件 扩展 名 为 html, htm, 
asp.aspx.php 3X jsp 等 ), 网 页 包含 着 文本 、 图 形 、 声 音 和 其 他 多 媒体 信息 ,一 个 网 站 的 页 面 
大 到 数 百 张 , 小 到 可 能 只 有 几 张 ,这 些 页 面 通过 超级 链接 (Hyper Link) 相 互联 接 在 一 起 ,你 
可 通过 单 击 超级 链接 从 一 个 页 面 转 到 其 他 页 面 上 进行 浏览 。 网 页 要 使 用 网 页 浏览 器 来 阅 
读 。 网 页 是 构成 网 站 的 基本 元 素 ,是 承载 各 种 网 站 应 用 的 平台 。 通 俗 地 说 ,您 的 网 站 就 是 由 
网 页 组 成 的 。 如 果 您 只 有 域名 和 虚拟 主机 而 没有 制作 任何 网 页 的 话 , 您 的 客户 仍旧 无 法 访 
问 您 的 网 站 。 在 网 站 上 通过 浏览 器 看 到 的 第 一 张 页 面 ,我 们 称 为 该 网 站 的 首页 (Home 
Page) 或 主页 。 


7.1.2 网 站 空间 


简单 地 讲 , 就 是 存放 网 站 内 容 的 空间 ,在 网 页 设计 好 之 后 ,需要 在 因特网 上 申请 一 个 存 
储 空间 来 存放 网 页 ,这 就 是 网 站 空间 。 平 时 我 们 在 上 网 时 ,通过 域名 (网 址 、 网 站 地 址 ) 就 可 
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以 访问 到 对 方 的 网 站 空间 的 相关 内 容 , 看 对 方 网 站 的 文章 ,或 下 载 网 站 提供 的 各 种 多 媒体 
(如 音乐 .电影 等 )。 网 站 空间 可 以 由 自己 买 台 服 务 器 来 做 ,但 费用 太 高 ,一 般 大 公司 或 大 型 
网 站 才 会 这 样 做 ,购买 一 个 普通 服务 器 要 几 万 ,高 性 能 的 服务 器 要 几 十 、 几 百 甚 至 几 千 万 。 
有 时 候 在 没 特别 指明 的 情况 下 ,网 站 空间 也 称 其 为 虚拟 主机 空间 ,通常 企业 可 以 选择 虚拟 主 
机 空间 作为 网 站 空间 。 


7.1.3 网 址 


因特网 中 ,如 果 要 从 一 台 计 算 机 访问 网 上 另 一 台 计 算 机 ,就 必须 知道 对 方 的 网 址 。 只 要 
在 浏览 器 软件 中 键入 您 的 网 址 ,全 世界 接 和 人 Internet 网 的 人 都 能 够 准确 无 误 的 访问 到 您 主 
页 的 内 容 。 这 里 所 说 的 网 址 实际 上 指 两 个 内 涵 , 即 IP 地 址 和 域名 地 址 。 计 算 机 是 个 数字 世 
界 ,任何 信息 在 计算 机 中 都 被 表示 成 数字 化 的 形式 ,即使 人 名 在 计算 机 中 表示 ,都 有 相应 的 
数字 代码 与 之 对 应 。 在 网 络 世 界 中 ,为 了 准确 地 找到 目的 计算 机 ,每 一 台 计 算 机 都 必须 标 有 
唯一 的 一 个 地 址 。 通 常 ,这 一 地 址 用 4 个 十 进 制 数 表 示 ,中 间 用 小 数 点 隔 开 , 称 为 IP 地 址 ， 
比如 202. 96. 128.86. 。 然 而 ,对 人 来 说 ,用 数字 表示 的 计算 机 地 址 难以 记忆 ,何况 因特网 上 
有 几 千 万 个 了 地 址 。 为 了 解决 这 一 问题 , 便 采 用 人 善于 识 记 的 名 字 来 表示 计算 机 。 为 了 确 
保 网 上 计算 机 标识 的 唯一 性 ,一 种 方案 可 以 采用 集中 命名 和 管理 的 办 法 ,整个 因特网 上 只 有 
一 个 机 构 来 负责 此 项 工作 ,很 显然 这 种 方案 是 不 现实 的 。 所 以 因特网 规定 了 一 套 命名 机 制 ， 
称 为 域名 系统 。 采 用 域名 系统 命名 的 网 址 , 即 为 域名 地 址 。 


7.1.4 域名 


从 技术 上 讲 , 域 名 只 是 因特网 中 用 于 解决 地 址 对 应 问题 的 一 种 方法 。 域 名 通俗 地 说 就 
是 站 点 的 名 字 , 大 体 可 分 为 国际 域名 、 国 内 域名 、 虚 拟 域名 三 类 。 域 名 是 Internet 网 络 上 的 
一 个 服务 器 或 一 个 网 络 系统 的 名 字 ,在 全 世界 ,没有 重复 的 域名 。 域 名 的 形式 是 以 若干 个 英 
文字 母 .数字 .中 横 线 组 成 的 ,如 open. edu. cn 是 一 个 国内 域名 。 

一 个 单位 、 机 构 或 个 人 若 想 在 互联 网 上 有 一 个 确定 的 名 称 或 位 置 ,需要 进行 域名 登记 。 
域名 登记 工作 是 由 经 过 授权 的 注册 中 心 进行 的 。 国 际 域名 是 用 户 可 注册 的 通用 项 级 域名 的 
俗称 , 它 的 后 缀 为 . com、. net 3X. org, 国 内 域名 为 后 级 为 . cn 的 域名 ,二 者 在 使 用 中 基本 没有 
区 别 。 

由 于 域名 和 商标 都 在 各 自 的 范畴 内 具有 唯一 性 ,同时 域名 和 商标 又 有 着 千 丝 万 缕 的 联 
系 。 于 是 许多 企业 在 选择 域名 时 ,往往 希望 用 和 自己 企业 商标 一 致 的 域名 ,但 是 域名 和 商标 
相 比 又 具有 更 强 的 唯一 性 。 如 今 人 们 在 飞快 地 注册 域名 ,在 国外 连 街头 上 的 小 百货 店 和 小 
加 油 站 都 注册 了 他 们 的 域名 ,以便 在 网 上 宣传 自己 的 产品 和 服务 。 在 美国 ,从 Internet 上 注 
册 域 名 的 公司 从 1995 年 初 的 25000 家 猛 增 到 目前 的 超过 400 000 家 ,有 人 把 这 件 事 情 比喻 
成 当年 人 类 发 现 了 新 大 陆 。 新 大 陆 的 资源 有 限 ,Internet 上 的 域名 更 有 限 ,因为 每 个 域名 都 
只 有 一 个 。 注 重 域名 注册 问题 ,不 但 有 助 于 塑造 使 用 者 的 网 上 形象 ,其 潜在 的 价值 也 是 不 可 
估量 的 ,域名 已 被 誉 为 企业 的 “网 上 商标 ”, 域 名 的 重要 性 及 价值 已 被 全 世界 的 企业 所 认识 。 
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7.2 网 站 的 分 类 


由 于 网 站 的 建设 到 现在 为 止 还 没有 一 个 统一 的 标准 和 固定 的 模式 , 现 已 形成 的 网 站 分 
类 方法 一 般 是 按照 主体 性 质 不 同 分 为 政府 网 站 ,企业 网 站 、 新 闻 性 网 站 、 商 业 网 站 、 教 育 科 研 
机 构 网 站 、 个 人 网 站 、 其 他 非 丛 利 机 构 网 站 以 及 其 他 类 型 等 。 要 想 设计 好 一 个 网 站 ,首先 应 
该 从 认识 已 有 的 网 站 出 发 ,分 析 总 结 各 类 网 站 建设 的 成 功 与 失败 经 验 ,在 此 基础 上 进行 归 
纳 、 创 意 。 下 面 首先 对 分 类 作 介 绍 ,并 对 某 些 具体 网 站 进行 一 些 简 单 的 分 析 。 


7.2.1 政府 网 站 


政府 网 站 是 我 国 各 级 政府 机 关 履 行 职能 、 面 向 社会 提供 服务 的 官方 网 站 ,是 政府 机 关 实 
现 政务 信息 公开 、 服 务 企业 和 社会 公众 .互动 交流 的 重要 渠道 。 政 府 网 站 , 即 是 指 一 级 政府 
在 各 部 门 的 信息 化 建设 基础 之 上 ,建立 起 跨 部 门 的 、 综 合 的 业务 应 用 系统 ,使 公民 、 企 业 与 政 
府 工作 人 员 都 能 快速 便捷 地 接 和 人 所 有 相关 政府 部 门 的 政务 信息 与 业务 应 用 ,并 获得 个 性 化 
的 服务 ,使 合适 的 人 能 够 在 恰当 的 时 间 获 得 恰当 的 服务 。 
政府 网 站 集 各 种 媒体 优势 (文字 音频、 视频 、 信 息 延 时 、 循 环 往复 交流 互 动 等 ) 于 一 身 ， 
具有 较 强 的 传播 性 。 在 人 们 的 日 常生 活 中 ,各 级 政府 是 重要 的 权威 信息 提供 者 ,人 们 一 方面 
需要 通过 政府 网 站 了 解 政府 的 法 律 法 规 . 最 新 动态 .便民 措施 .施政 纲领 ; 另 一 方面 ,政府 网 
站 具有 商业 网 站 无 法 比拟 的 功能 , 即 能 够 通过 开展 网 上 电子 政务 吸引 大 量 的 信息 使 用 者 ,如 
网 上 纳税 、 网 上 公交 传送 等 。 同 时 ,政府 本 身 又 是 信息 的 最 大 使 用 者 ,政府 的 各 项 决策 需要 
大 量 的 相关 信息 的 支持 ,政府 网 站 成 为 一 种 最 经 济 、 最 便捷 的 信息 获取 系统 。 
图 7-1 所 示 为 “广东 省 人 民政 府 网 ”首页 (http://www. gd. gov. cn) , 
从 目前 建成 的 政府 网 站 看 ,其 具有 的 一 般 功能 为 : 
1. 动态 信息 发 布 
网 上 的 政府 信息 具有 规模 大 ,信息 量 大 、 权 威 性 强 等 特点 。 这 些 信息 大 致 可 分 三 类 : 
。 综合 类 ,此 类 信息 量 大 、 覆 盖 面 广 , 实 用 性 强 ,在 国内 网 上 信息 服务 中 起 主导 作用 。 
° 行业 类 ,此 类 信息 在 政府 信息 中 占 主导 地 位 ,具有 规模 大 、 专 业 性 强 等 特点 ,服务 对 
象 基本 为 相关 行业 。 

° 宣传 类 ,此 类 信息 在 精神 文明 建设 中 占 主导 地 位 ,在 网 络 宣传 中 ,注重 人 们 对 经 济 、 
政治 文化 .社会 问题 的 关注 点 ,真实 反映 群众 的 切身 利益 ,提高 政府 网 站 的 权威 性 
和 公信 力 , 这 一 点 是 其 他 类 型 网 站 无 法 比拟 的 。 

由 于 政府 信息 规模 大 、 信 息 量 大 .权威 性 强 , 所 以 政府 信息 服务 的 发 展 直接 关系 到 网 上 
信息 服务 的 内 容 和 规模 。 如 何 使 政府 信息 更 好 地 为 社会 服务 ,应 该 尽快 提高 政府 信息 的 开 
放 性 和 综合 性 ,以 满足 社会 公众 对 信息 的 需求 ,以 及 促进 全 国信 息 服务 的 发 展 。 

2. 在 线 调查 

通过 电子 与 网 络 手段 ,政府 可 开展 广泛 的 在 线 民意 调查 .公民 意见 反馈 和 公众 咨询 ,从 
而 能 以 较 低 成 本 改变 传统 的 听证 方式 与 意见 反馈 的 模式 和 机 制 ,从 而 更 好 地 制定 政策 ,更 好 
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图 7-1 


地 行政 施政 。 在 线 调查 可 以 提高 政府 听政 于 民 、 问 计 于 民 、 咨 询 于 民政 策 的 实施 。 开 展 在 线 

调查 的 优越 性 表现 在 : 调查 的 广泛 性 .形式 多 样 性 、 实 时 交互 性 等 。 例 如 www. gd. gov. cn 

政府 网 提供 的 “网 上 信访 ”和 “网 上 互动 "栏目 ,政府 可 以 通过 省 长 信箱 .直播 访谈 ,政务 论 

坛 、 民 声 热线 .民意 征集 ` 公 众 留言 .投诉 举报 等 功能 了 解 民 生 关 心 的 问题 ,如 图 7-2 所 示 。 
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图 72 


3. 站 内 检索 

随 着 计算 机 网 络 的 迅猛 发 展 ,文本 检索 技术 的 发 展 可 谓 日 新 月 异 , 人 们 开始 习惯 互联 网 
的 检索 时 代 , 站 内 检索 的 需求 也 已 经 显露 出 来 。 网 站 实现 站 内 检索 已 经 成 为 一 个 站 点 的 基 
本 要 求 , 在 政府 网 中 提供 了 大 量 法 律 、 法 规 、 政 策 信息 , 如 此 大 的 信息 量 如 果 不 提供 检索 功能 
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是 很 难 查 到 相关 信息 的 ,所 以 站 内 检索 是 一 个 很 重要 的 功能 ,也 是 衡量 政府 网 站 对 社会 的 开 
放 程度 以 及 对 公众 提供 信息 服务 质量 的 标准 之 一 。 站 内 检索 一 般 具 有 模糊 查询 和 详细 查询 
两 种 方式 。 

4. 网 上 办 公 

网 上 办 公 将 促进 政务 工作 的 透明 度 ,决策 过 程 的 科学 化 与 民主 化 ,提高 政府 的 工作 效 
率 。 网 上 办 公 也 将 改进 政府 的 信息 系统 .工作 流程 政府 采购 和 公共 服务 方式 。 民 众 随时 随 
地 都 可 以 通过 这 个 体系 了 解 当 地 社会 .经济 \ 文 化 信息 和 各 级 政府 所 发 布 的 政策 ,法规 ,法令 
等 ,咨询 有 关 社 会 保障 、 医 疗 保健 、 税 收 条 例 、 劳 动 就 业 等 方面 的 问题 ,并 通过 这 个 网 络 向 政 
府 反映 情况 ,提出 建议 和 批评 。 它 的 逐步 推广 必然 带 来 政府 机 构 办 公 程 序 和 办 公 方 式 的 


7.2.2 企业 网 站 


企业 网 站 主要 为 了 外 界 了 解 企业 自身 .树立 良好 企业 形象 ,并 适当 提供 一 定 服务 的 网 
站 。 根 据 行业 特性 的 差别 ,以 及 企业 的 建站 目的 和 主要 目标 群体 的 不 同 ,大 致 可 以 把 企业 网 
站 分 为 ; 

CD 基本 信息 型 : 主要 面向 客户 、 业 界 人 士 或 者 普通 浏览 者 ,以 介绍 企业 的 基本 资料 、 
帮助 树立 企业 形象 为 主 ,也 可 以 适当 提供 行业 内 的 新 闻 或 者 知识 信息 。 这 类 网 站 所 包含 的 
功能 比较 简单 ,通常 包含 的 功能 有 检索 ,论坛 .留言 ,也 有 一 些 提供 简单 的 浏览 权 控制 ,如 只 
对 代理 商 开 放 的 栏目 或 频道 。 

(2) 电子 商务 型 : 主要 面向 供应 商 、 客 户 或 者 企业 产品 (服务 的 消费 群体 ,以 提供 某 种 
直属 于 企业 业务 范围 的 服务 或 交易 .或 者 为 业务 服务 的 服务 或 者 交易 为 主 。 这 样 的 网 站 可 
以 说 是 正 处 于 电子 商务 化 的 一 个 中 间 阶 段 ,由 于 行业 特色 和 企业 投入 的 深度 广度 的 不 同 , 其 
电子 商务 化 程度 可 能 处 于 从 比较 初级 的 服务 支持 、 产 品 列表 到 比较 高 级 的 网 上 支付 的 其 中 
某 一 阶段 ,例如 ,网 上 银行 .网 上 酒店 等 。 

(3) 多 媒体 广告 型 : 主要 面向 客户 或 者 企业 产品 (服务 ) 的 消费 群体 ,以 宣传 企业 的 核 
心 品牌 形象 或 者 主要 产品 (服务 ) 为 主 。 这 种 类 型 无 论 从 目的 上 还 是 实际 表现 手法 上 相对 于 
普通 网 站 而 言 更 像 一 个 平面 广告 或 者 电视 广告 ,因此 用 “多 媒体 广告 "来 称呼 这 种 类 型 的 网 
站 更 贴切 一 点 。 

在 实际 应 用 中 ,很 多 网 站 往往 不 能 简单 地 归 为 某 一 种 类 型 ,无 论 是 建站 目的 还 是 表现 形 
式 都 可 能 涵盖 了 两 种 或 两 种 以 上 类 型 。 对 于 企业 网 站 可 以 根据 自身 的 特点 将 上 述 类 型 综合 
应 用 到 自己 的 站 点 中 ,但 是 一 定 要 突出 自身 的 特点 。 


7.2.3 综合 类 网 站 


这 类 网 站 的 代表 有 新 浪 .搜狐 、 网 易 、Tom、21cn、 雅 虎 中 国 、 新 华 网 、 人 民 网 等 。 这 些 网 
站 除了 传统 强项 经 济 .时政 、 体 育 以 及 军事 报道 外 ,现在 都 设置 了 包括 房地产 、 汽 车 .电子 竞 
技 、 娱 乐 .生活 、 彩 票 等 过 去 鲜 有 问津 的 新 频道 ,力图 更 加 贴近 受众 .贴近 生活 。 而 且 这 些 网 
站 都 加 强 了 商务 及 服务 内 容 , 通 过 整合 信息 资源 建立 起 资讯 服务 体系 ,并 加 入 了 视频 新 闻 和 
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多 媒体 内 容 , 突 出 了 网 站 的 交互 功能 。 

此 类 网 站 的 具有 时 效 性 强 、 辆 射 范 围 广 \ 表 现 力 丰 富 、 信 息 量 巨大 特点 ,已 逐渐 成 为 网 民 
经 常 愿 意 光 顾 的 站 点 。 此 类 网 站 特别 注重 新 闻 报 道 , 国 内 外 的 新 闻 都 可 以 在 网 上 及 时 的 看 
到 ,它们 能 在 众多 网 站 中 脱颖而出 ,与 它 在 新 闻 方 面 的 突出 成 就 是 分 不 开 的 。 这 些 门户 网 站 
除了 共性 外 ,还 具有 各 自 的 特点 ,下 面 介绍 一 些 国内 具有 影响 力 的 网 站 自身 的 定位 。 

。 新 浪 网 是 全 球 最 大 的 中 文 门户 网 站 ,全 世界 华语 网 民 云 集 之 地 ,中 国 互联 网 经 济 的 
风向 标 , 它 一 直 坚 持 领 先 者 和 探索 者 的 姿态 .积极 开拓 网 站 新 的 热点 。 
搜狐 网 是 中 国 互联 网 的 标志 性 公司 ,中 国 最 知名 的 门户 网 站 之 一 , 它 保持 自身 灵活 
性 和 适应 性 ,在 互动 式 搜索 引擎 、 网 络 游 戏 和 无 线 增值 服务 等 领域 均 有 不 错 的 表现 。 
网 易 的 网 络 游戏 曾经 创造 了 网 易 创 业 的 神话 ,但 在 市 场 竞争 日 益 加 剧 的 今天 ,网 易 
来 自 于 游戏 ,短信 和 广告 的 收入 ,加 上 收费 邮箱 、 个 人 主页 等 业务 补充 构成 了 整个 网 
易 的 赢利 模式 。 

Tom. com 注重 中 国 无 线 增值 服务 快速 增长 的 市 场 。 雅 虎 中 国 公认 的 搜索 .邮件 、 即 
时 通信 和 领域 都 是 很 有 特色 的 。 

21cn 作为 华南 第 一 大 综合 门户 网 站 ,已 开始 建立 起 一 种 基于 电信 运营 商 \ 内 容 提供 
商 、 门 户 的 独特 互利 模式 。 

人 民 网 作为 国家 重点 新 闻 网 站 坚持 自己 的 办 网 目标 
正成 为 中 国力 至 全 球 华人 界 最 受 关注 的 新 闻 网 站 。 
新 华 网 是 中 国 互 联网 最 大 的 官方 网 站 ,可 以 倾听 到 官方 通过 互联 网 传递 出 来 的 最 快 
和 最 准确 的 信息 。 

综合 类 网 站 已 成 为 人 们 网 上 获取 信息 的 首选 ,让 人 们 足 不 出 户 就 可 以 了 解 天 下 事 ,所 以 
这 类 网 站 也 是 最 受 网 民 欢 迎 的 站 点 。 


“人 民 网 上 看 民意 ”, 人 民 网 


7.2.4 搜索 引擎 网 站 


面 对 互 联网 上 巨大 的 信息 资源 ,如 何 快速 有 效 地 寻找 到 人 们 所 需要 的 信息 ,又 如 何 将 新 
产生 的 信息 及 时 提供 给 网 上 的 广大 用 户 使 用 ,成 为 互联 网 应 用 研究 的 一 个 重要 课题 。 
Internet 上 的 搜索 引擎 是 一 种 专门 提供 信息 检索 服务 的 网 站 ,帮助 使 用 者 快速 .方便 地 获取 
网 上 存在 的 各 类 信息 ,搜索 引擎 网 站 改变 了 以 往 通过 输入 URL 地 址 访问 特定 网 站 这 一 烦 
琐 的 方法 ,使 用 者 可 以 输入 关键 词 或 其 他 检索 条 件 进行 目标 明确 的 检索 ,使 网 上 信息 获取 方 
式 产生 了 根本 性 变化 。 

1994 年 是 搜索 引擎 发 展 历史 上 最 重要 的 一 年 , 华 疹 学 生 杨 致远 和 美国 人 大 卫 : 费 罗 共 
同 创建 的 一 个 具有 超级 目录 索引 的 网 站 Yahoo ,成 功 地 引入 了 搜索 引擎 的 概念 。 从 此 
搜索 引擎 进入 了 调整 发 展 时 期 ,先后 出 现 了 许多 著名 搜索 网 站 ,例如 Yahoo Google, Baidu 
等 。 搜 索 网 站 一 般 为 三 类 : 

1. 目录 索引 

目录 索引 就 是 在 检索 信息 库 中 将 网 站 分 门 别 类 地 组 织 在 多 级 目录 中 ,在 网 页 中 也 按照 
这 个 多 级 目录 结构 以 树 状 的 形式 将 库 中 收藏 的 网 站 的 链接 等 信息 逐 层 列表 出 来 ,供用 户 在 
检索 时 使 用 。 检 索 网 站 在 网 页 上 提供 多 个 检索 主 目录 ,上 网 用 户 根据 需要 从 主 目 录 中 一 级 
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一 级 展开 ,从 而 找到 自己 需要 的 相关 子 目 录 , 最 后 一 级 子 目 录 将 列 出 所 包含 的 网 站 ,进入 网 
站 后 就 可 以 查阅 所 需要 的 信息 。Yahoo 是 目录 检索 网 站 的 代表 ,以 Yahoo 的 杭州 站 为 例 ， 
其 搜索 主页 上 提供 了 房产 、 商 务 等 15 个 检索 主 目录 ,如 图 7-3 所 示 。 依 次 按照 房产 、 新 房 、 
普通 住宅 的 顺序 就 可 以 找到 很 多 关于 新 房 的 信息 了 ,如 图 7-4 所 示 。 
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[КАНОО 加 更 网 .杭州 = 


首页 分 类 网 点 黄页 论坛 求助 关系 过 推广 
租房 ， 二 手 房 ”新房 ”小 区 房价 指数 ”房产 中 介 REER ”房产 资讯 ”房产 论坛 


首页 > 全 部 信息 》 杭 州 新 房 》 杭 州 普通 住宅 》 共 找到 733 条 

:全 部 西湖 区 Б) 上 城区 (1) ПТО (10) 滨江 区 00) жс) 下 城区 (14) 280) 余杭 区 (144) MUE 0) 
:全 部 现房 G11) MEUT) REG) 

全 部 Ea) 简装 (16) Mateo 

全 部 FESUN) 485070 其 它 (148】 HESUS) ФЕВ бз) MRSC) ПАВ БОЮ) RSC) 
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2. 全 文 检索 

全 文 检索 是 基于 网 页 进行 的 ,全 文 检索 系统 中 最 为 关键 的 部 分 是 全 文 检索 引擎 ,各 种 应 
用 程序 都 需要 建立 在 这 个 引擎 之 上 。 一 个 全 文 检索 应 用 的 优异 程度 ,根本 上 由 全 文 检索 引 
擎 来 决定 。 检 索 程 序 就 根据 事先 建立 的 索引 在 数据 库 中 进行 查找 ,并 将 查找 的 结果 反馈 给 
用 户 的 检索 方式 。 全 文 检索 网 站 一 般 有 两 种 方式 。 一 种 是 定期 检索 ,每 隔 一 段 固 定时 间 ,对 
一 定 IP 地 址 范围 内 的 互联 网 站 进行 检索 ,一 旦 发 现 新 的 网 站 , 它 会 自动 提取 网 站 的 网 页 信 
息 和 将 网 址 加 入 自己 的 数据 库 。 另 一 种 是 针对 特定 的 网 站 的 搜索 ,网 站 的 拥有 者 向 搜索 网 
站 提交 申请 ,登记 后 搜索 引擎 会 在 定期 扫描 整个 网 站 并 将 获取 的 相关 网 页 信息 存 人 数据 库 ， 
以 备用 户 查询 。 

3. 综合 型 引擎 

目前 ,全 文 搜索 引擎 与 目录 索引 的 技术 逐渐 相互 渗透 。 一 些 原来 纯粹 提供 全 文 检 索 服务 
的 搜索 引擎 现在 也 接收 目录 索引 注册 ,提供 目录 索引 服务 。 或 者 集成 了 其 他 目录 索引 引擎 ,在 
搜索 结果 中 直接 列 出 经 过 目录 索引 搜索 出 来 的 网 站 。 比 如 国内 的 几 家 著名 的 搜索 引擎 网 站 就 
有 网 站 搜索 和 网 页 搜索 之 分 ( 见 图 7-5 和 图 7-6) ,用 户 可 以 自己 选择 。 选 择 网 站 搜索 时 , 它 是 
目录 索引 ,搜索 范围 是 自己 已 注册 的 网 站 ;而 选择 网 页 搜索 时 ,它们 又 成 了 全 文 搜索 引擎 。 
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7.2.5 教育 类 网 站 


这 类 网 站 主要 以 提供 各 种 形式 的 网 上 远程 教育 为 主 。 随 着 网 络 技术 和 多 媒体 技术 的 快 
速 发 展 ,网 站 提供 的 服务 也 发 生 了 很 大 的 变化 。 早 期 的 网 站 中 只 能 提供 教育 信息 查询 、 网 上 
注册 ,电子 邮件 答疑 ,文本 课件 浏览 及 下 载 等 服务 ,如今 的 教育 网 站 可 以 提供 网 上 视频 点 播 、 
虚拟 课堂 .电子 图 书 借阅 等 互动 型 服务 。 人 们 的 学 习 方式 也 随 之 发 生 了 改变 ,人 们 可 以 更 便 
捷 地 选择 学 习 的 类 型 。 


7.2.6 电子 商务 类 网 站 


我 国电 子 商务 起 步 较 晚 ,但 发 展 速 度 非常 快 。2000 年 ,我 国电 子 商 务 交 易 额 仅 为 
771. 6 亿 元 人 民 币 ,到 2010 年 ,根据 中 国电 子 商 务 研究 中 心 正式 发 布 的 (2010 年 度 中 国电 子 
商务 市 场 数据 监测 报告 ) 显 示 ,电子 商务 交易 额 逾 4. 5 万 亿 元 人 民 币 ,其 中 ,B2B 电子 商务 交 
易 额 达到 3. 8 万 亿 元 ,比例 接近 电子 商务 市 场 交易 总 额 的 84.4%。 根 据 市 场 预测 ，2011 年 
中 国电 子 商务 市 场 规模 将 会 达到 7 亿 万 元 。 

如 今 网 上 购物 、 直 销 购物 活动 越 来 越 体 现 出 其 在 商业 活动 中 的 强大 发 展 势头 ,而 且 越 来 
越 多 的 网 络 用 户 已 认可 了 网 上 购物 能 够 为 生活 带 来 更 大 便捷 以 及 实惠 ,国内 的 电子 商务 网 
站 在 迅猛 发 展 ,也 诞生 了 很 多 知名 的 电子 商务 网 站 ,比如 阿里 巴巴 (alibaba)、HC360 慧聪 
商务 (hc360) ,中国 供应 商 网 (www. china. cn)、 当 当 网 (dangdang) 、 铭 万 网 (mainone)、 制 


造 资源 网 (www. oemresource. com) 等。 
7.2.7 个 人 网 站 


个 人 站 点 是 指 由 少数 人 或 者 个 人 建立 的 网 站 ,一 般 是 出 于 个 人 兴趣 和 爱好 而 建设 的 。 
目前 , 随 着 网 络 条 件 的 改善 .网 络 知 识 的 普及 ,在 因特网 上 拥有 自己 的 一 片 家 园 已 经 成 为 每 
一 个 网 民 的 心愿 。 起 初 , 人 们 并 没有 注意 个 人 网 站 的 商业 价值 ,但 随 着 个 人 主页 制作 水 平 的 
不 断 提高 ,个 人 站 点 也 显示 出 了 一 定 市 场 价值 。 个 人 主页 制作 从 原来 的 业余 化 已 逐步 向 专 
业 化 的 方向 发 展 了 , 且 制 作 水 平 也 越 来 越 高 。 


习题 7 


7-1 网 站 由 哪些 内 容 组 成 ? 
7-2. 试 说 明 政 府 网 站 具有 的 功能 。 
7-3 一 般 按 网 站 主体 性 质 分 类 ,网 站 分 为 哪些 类 型 ? 


(Chapter 


第 8 章 网 站 规划 设计 


本 章 知识 点 

。 确定 网 站 类 型 

。 定位 网 站 主题 与 名 称 
。 确定 网 站 内 容 

。 网 站 界面 规划 

° 网 站 策划 书 撰写 要 点 
本 章 学 习 目 标 

° 如 何 确 定 网 站 类 型 
。 掌握 定位 网 站 主题 与 名 称 的 方法 
° 确定 网 站 内 容 

。 掌握 网 站 界面 规划 
。 如 何 写 好 网 站 策划 书 


网 站 规划 对 网 站 建设 起 到 计划 和 指导 的 作用 ,对 网 站 的 内 容 和 维护 起 到 定位 作用 。 一 
个 网 站 的 成 功 与 否 和 创建 站 点 前 的 网 站 规划 有 着 极为 重要 的 关系 。 在 建设 网 站 前 设计 人 员 
应 该 首先 明确 建设 网 站 的 目的 及 功能 定位 ,才能 对 网 站 进行 规划 和 实施 网 站 开发 。 

网 站 规划 是 网 站 建设 的 基础 和 指导 纲领 ,决定 了 一 个 网 站 的 发 展 方向 ,同时 对 网 站 推广 
也 具有 指导 意义 。 在 网 站 的 规划 阶段 要 明确 目标 .详细 规划 ,因为 网 站 的 建设 要 耗费 大 量 的 
财力 和 物力 ,一 旦 在 规划 阶段 对 网 站 的 内 容 和 主题 定位 有 偏差 ,将 对 整个 网 站 的 建设 产生 很 
大 的 影响 。 


8.1 确定 网 站 类 型 


随 着 网 络 的 不 断 发 展 ,网 站 的 数量 与 日 俱 增 , 网 站 出 现 了 优胜 劣 汰 ,有 些 网 站 发 展 蒸 蒸 
日 上 ,有 些 则 会 逐渐 衰落 直至 消亡 。 不 论 是 小 型 网 站 或 者 是 大 型 网 站 都 要 明确 网 站 的 类 型 ， 
要 有 自己 的 特点 ,比如 个 人 网 站 有 人 喜欢 展示 个 人 的 家 庭 生活 有 人 喜欢 展示 兴趣 爱好 、 有 
人 喜欢 分 享 自己 的 成 功 经 验 ,其 实 任何 类 型 的 网 站 都 有 不 同 的 侧重 点 ,明确 了 建设 网 站 的 类 
型 有 利于 更 好 地 开发 ,设计 和 推广 网 站 。 

因为 网 站 的 类 型 和 功能 都 各 不 相同 ,所 以 在 设计 网 站 之 前 ,一 定 要 先 清楚 自己 的 网 站 是 
什么 类 型 ,然后 再 结合 功能 、 目 的, 有的放矢 ,才能 做 好 网 站 的 设计 ,否则 在 设计 过 程 中 再 修 
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改 就 非常 困难 了 。 网 站 类 型 主要 有 门户 网 站 、 普 及 型 网 站 .电子 商务 网 站 、 媒 体 类 网 站 办公 
事务 管理 网 站 \ 商 务 管理 网 站 和 娱乐 性 网 站 等 ,下 面 分 析 几 种 常见 的 类 型 供 大 家 选择 。 


8.1.1 综合 信息 门户 网 站 


综合 信息 门户 网 站 简称 门户 网 站 ,或 称 为 人 门 网 站 ,是 综合 性 网 站 的 俗称 ,该 类 型 网 站 
提供 的 信息 丰富 、 服 务 多 样 ,是 网 络 用 户 上 网 的 首选 。 在 Internet 发 展 的 初期 ,门户 网 站 大 
多 专 指 那些 提供 搜索 引擎 的 网 站 ,如 Yahoo、 搜 狐 等 ,这 是 因为 大 多 数 客户 上 网 时 不 知道 从 
哪里 下 手 ,往往 需要 借助 搜索 引擎 来 查找 自己 感 兴趣 的 网 站 信息 ,久而久之 ,此 类 网 站 就 成 
了 全 球 网 上 冲浪 者 的 必 经 之 地 ,网 站 的 知名 度 也 大 大 提高 了 。 

随 着 Internet 的 普及 ,人 们 对 网 络 的 熟悉 程度 也 不 断 提高 ,对 搜索 引擎 的 喜爱 程度 也 有 
所 下 降 , 多 数 网 络 使 用 者 访问 提供 搜索 引擎 的 网 站 也 只 是 以 此 为 人 门 ,查询 信息 完毕 之 后 便 
立即 离开 ,或 直接 跳 转 到 目的 网 站 。 为 了 能 让 用 户 多 停留 一 些 时 间 ,门户 网 站 经 营 者 使 出 浑 
身 解 数 , 在 网 站 的 内 容 和 其 他 服务 方面 下 了 不 少 工夫 ,纷纷 推出 了 大 量 免费 的 服务 项 目 , 诸 
如 个 人 主页 、 上 股票 行情 ,免费 电 子 信箱 、 聊 天 室 、 星 座 运 情 、 天 气 预报 、 即 时 新 闻 、 网 上 论坛 б 
乐 信息 和 网 络 游 戏 等 。 

目前 比较 知名 的 中 文 门户 网 站 主要 有 新 浪 、 搜 狐 、 网 易 , 如 图 8-1 所 示 , 这 些 网 站 内 容 除 
了 搜索 引擎 外 ,还 包括 新 闻 、 娱 乐 游戏 ,文化 ,体育 健康 、 科 技 、 财 经 教育 汽车 视频、 音乐 
等 若干 板块 ,以 及 网 上 短信 、 个 人 主页 .免费 邮箱 、 博 客 、 聊 天 、 论 坛 等 服务 项 目 。 


Pe 
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图 81 


国外 知名 的 门户 网 站 如 雅虎 .MSN 等 ,内 容 以 新 闻 和 娱乐 为 主 ,也 提供 免费 邮箱 、 在 线 
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聊天 等 服务 项 目 。 
国内 传统 媒体 办 的 网 站 ,以 人 民 网 ` 大 洋 网 .央视 国际 为 代表 ,以 提供 新 闻 和 时 事 评论 
Hx. 


8.1.2. 普及 型 网 站 


普及 型 网 站 主要 包括 政府 门户 网 站 ,企业 门户 网 站 、 事 业 单 位 网 站 、 学 校 网 站 以 及 个 人 
网 站 等 。 

1. 企业 门户 网 站 

企业 门户 网 站 是 为 企业 提供 全 面 信息 资讯 和 服务 的 专业 的 行业 性 网 站 ,其 实质 是 行业 
网 站 ,用 企业 门户 称呼 是 为 方便 理解 。 用 户 的 需求 推动 着 互联 网 的 发 展 , 用 户 需要 更 多 地 了 
解 企业 ,企业 也 需要 挖掘 潜在 的 消费 群 ,这 是 企业 的 综合 信息 网 站 发 展 的 推动 力 。 企 业 门 户 
网 站 发 布 企 业 基本 信息 ,业绩 ,企业 精神 ,企业 文 化 乃至 企业 的 整体 形象 ,产品 发 布 、 服 务 信 
息 、 供 求 信息 人员 招 聘 信息 .通信 联系 方式 和 合作 信息 等 ,通过 Internet 提高 企业 产品 的 竞 
争 力 ,其 最 终 目的 是 使 企业 通过 互联 网 实现 商业 利益 。 

企业 门户 网 站 的 发 展 也 是 顺应 互联 网 整体 发 展 趋势 , 它 将 企业 的 日 常 涉外 工作 通过 企 
业 网 站 的 形式 管理 ,其 中 包括 营销 、 技 术 支持 .售后 服务 .物料 采购 .社会 公共 关系 处 理 等 。 
因 网 站 涵盖 的 工作 类 型 多 ,信息 量 大 ,访问 群体 广 .信息 更 新 需要 多 个 部 门 共同 完成 。 

企业 网 站 有 两 种 目的 比较 明确 的 类 型 : 产品 查询 展示 型 网 站 和 品牌 宣传 型 网 站 。 

产品 查询 展示 型 网 站 ,主要 面向 客户 .业界 人 士 或 者 普通 浏览 者 .以 介绍 企业 的 基本 资 
料 、 推 广 产 品 、 帮 助 树立 企业 形象 为 主 ,也 可 以 适当 提供 行业 内 的 新 闻 或 者 知识 信息 ,以 提供 
信息 为 主要 目的 ,不 要 求实 现 业务 或 工作 逻辑 。 此 类 网 站 利用 网 络 的 多 媒体 技术 ,数据 库存 
储 查询 技术 ,三 维 展示 技术 ,配合 有 效 的 图 片 和 文字 说 明 , 将 企业 的 产品 (服务 ) 充 分 展现 给 
新 老 客 户 , 使 客户 能 全 方位 地 了 解 公司 产品 。 与 传统 的 产品 印刷 资料 相 比 ,网 站 可 以 营造 更 
加 直观 的 氛围 和 产品 的 感染 力 , 促 使 商家 及 消费 者 对 产品 产生 采购 欲望 ,从 而 促进 企业 
销售 。 

品牌 宣传 型 网 站 , 指 的 是 以 互联 网 为 载体 ,进行 品牌 塑造 ,让 浏览 者 加 深 对 公司 的 了 解 ， 
对 企业 品牌 ,文化 ,理念 有 更 好 的 认识 ,网 站 着 重 展示 企业 CI 传播 品牌 文化 ,提高 品牌 知名 
度 。 此 类 网 站 强调 广告 创意 设计 ,用 多 媒体 交互 技术 .动态 网 页 技术 等 新 技术 全 方位 地 宣传 
企业 文化 ,将 企业 品牌 通过 互联 网 推广 给 消费 者 。 此 类 网 站 特点 是 视觉 效果 夺目 绚丽 ,网 站 
设计 与 企业 文化 .产品 有 很 好 的 关联 ,技术 手段 多 采用 图 片 Flash 和 视频 。 

2. 政府 门户 网 站 

经 过 多 年 的 电子 政务 建设 与 探索 ,人 们 逐渐 明白 网 站 在 电子 政务 中 的 主体 地 位 它 
既是 电子 政务 的 外 在 表现 ,也 是 在 网 络 时 代 “ 执 政 为 民 、 直 接 服务 大 众 ” 的 窗口 ,更 是 从 电子 
政务 向 电子 政府 过 渡 的 平台 。 政 府 门 户 网 站 建设 的 成 败 与 否 ,直接 标志 我 国电 子 政务 的 成 
败 , 效 益 发 挥 的 高 低 , 因 此 正在 成 为 我 国电 子 政务 工作 的 中 心 任务 。 

政府 门户 网 站 作为 电子 政府 公共 服务 的 核心 平台 ,是 政府 实现 政务 信息 公开 、 服 务 企业 
和 社会 公众 方便 公众 参与 的 重要 渠道 ,已 成 为 政府 和 社会 互动 的 第 一 界面 ,其 发 展 水 平 也 
成 为 衡量 国家 及 电子 政务 进程 的 核心 标志 。 以 服务 为 指向 的 电子 政府 运动 ,伴随 着 各 国 的 
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国家 信息 化 进程 , 渐 成 风潮 。 

政府 门户 网 站 主要 包括 政府 新 闻 信息 发 布 . 政 府 文件 .政策 、 机 构 组 成 .人 事 任免 办事 
规程 .意见 政绩 、 辖 区 地 图 及 介绍 等 ,如 图 8-2 所 示 。 政 府 门 户 网 站 是 一 个 比较 严肃 的 网 站 ， 
没有 商业 广告 ,网 页 设计 应 该 比较 沉稳 。 此 类 网 站 重点 面向 领域 有 政府 、 金 融 、 农 业 、 卫 生 
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з. 事业 单位 网 站 

事业 单位 网 站 主要 宣传 单位 的 形象 .介绍 单位 的 业绩 、 组 织 机 构 、 联 系 方式 等 。 

4. 学 校 网 站 

学 校 网 站 最 为 突出 的 是 大 学 网 站 ,主要 介绍 学 校 的 历史 和 文化 .本科 教育 ,研究生 教 育 、 
海外 教育 、 科 学 研究 、 招 生 信 息 、 院 系 设置 ,管理 机 构 、 合 作 交 流 、 学 生生 活 、 学 校 资源 和 招聘 
信息 等 。 图 8-3 所 示 为 中 山大 学 的 网 站 。 

5. 个 人 网 站 

个 人 网 站 主要 展现 个 人 的 才华 、 发 表 个 人 的 观点 、 介 绍 个 人 某 一 方面 的 技能 等 。 


8.1.3 电子 商务 网 站 


电子 商务 (Electronic Commerce) 是 指 利用 计算 机 技术 、 网 络 技术 和 远程 通信 技术 , 实 
现 整个 商务 (买卖 :过 程 电子 化 数字 化 和 网 络 化 。 人 们 可 以 不 再 需要 面对面 地 看 着 实 实在 
在 的 货物 , 靠 纸 介质 单据 (包括 现金 ) 进 行 交易 ,而 是 通过 Internet 上 琳琅 满目 的 商品 信息 、 
完善 的 物流 配送 系统 和 既 方 便 又 安全 的 资金 结算 系统 进行 交易 。Internet 实现 了 世界 范围 
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图 8-3 


内 网 络 间 的 互联 互通 和 信息 共享 ,打破 了 地 域 上 的 差别 和 时 间 上 的 限制 ,促进 了 电子 商务 活 
动 的 开展 。 

电子 商务 网 站 的 目的 就 是 通过 Internet 销售 货品 一 利 ,由 于 电子 商务 通过 Internet Ж 
行 电 子 交 易 , 因 此 电子 商务 网 站 需要 高 安全 性 、 高 可 靠 性 、 高 伸缩 性 的 数据 库 和 设计 技术 ,这 
与 一 般 网 站 有 着 明显 不 同 。 

电子 商务 网 站 最 为 常见 的 形式 就 是 网 上 购物 型 网 站 ,主要 提供 网 上 商品 买卖 ,购买 的 对 
象 可 以 是 企业 之 间 (B2B. 如 阿里 巴巴 ) ,消费 者 之 间 (C2C, 如 淘宝 网 ,易趣 、 拍 拍 网 )、 企 业 与 
消费 者 之 间 (B2C, 如 新 蛋 网 ,如 图 8-4 所 示 )。 按 照 过 程 可 分 为 商品 检索 、 商 品 采购 、 订 单 支 
付 三 个 阶段 ,因此 ,电子 商务 网 站 应 当 具 有 如 下 功能 : 

° 商品 发 布 功 能 

选择 优秀 商品 ,精心 组 织 商 品 信息 ,让 更 多 的 客户 了 解 这 些 商品 。 

。 商品 选 购 功 能 

客户 根据 需要 ,可 以 像 超市 里 一 样 使 用 “购物 车 ”方便 地 选 购 商品 。“ 购 物 车 ”技术 最 大 
限度 地 提高 了 商品 采购 的 速度 ,具有 个 性 化 的 采购 订单 模板 ,顾客 可 以 进行 购物 组 合 比较 。 
“购物 车 ”内置 的 价格 计算 模型 可 以 根据 商家 的 价格 体系 灵活 定制 。 

* 在 线 交易 功能 

顾客 将 选 好 的 商品 ` 个 人 联系 信息 、. 送 货 的 方式 .付款 的 方式 等 填 好 后 提交 给 网 站 的 订 
单程 序 ,商家 在 收 到 订单 后 通过 邮件 或 电话 核实 上 述 内 容 。 

° 商品 交接 资金 结算 功能 

按照 功能 模块 的 划分 该 类 网 站 主要 的 功能 为 : 商品 管理 .订购 管理 .订单 管理 .产品 推 
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荐 、 支 付 管理 ,收费 管理 、 送 发 货 管理 ,会 员 管 理 等 基本 系统 功能 。 
随 着 我 国电 子 商务 行业 的 快速 发 展 ,购物 型 网 站 为 销售 商务 开辟 了 新 的 营销 渠道 ,扩大 
了 市 场 ,同时 还 可 以 接触 最 直接 的 消费 者 .获得 第 一 手 的 产品 市 场 反 馈 , 有 利于 市 场 决 策 。 
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电子 商务 网 站 还 有 一 种 是 企业 涉外 商务 型 网 站 ,以 互联 网 为 基础 ,结合 企业 自身 的 网 站 
提高 企业 的 各 种 涉外 工作 的 效率 。 该 类 网 站 的 核心 目标 是 提供 远程 及时、 准确 的 服务 de 
业 通过 这 个 平台 可 以 实现 渠道 分 销 、 终 端 客户 销售 、 合 作 伙伴 管理 ,网 上 采购 、 实 时 在 线 服 
务 、 物 流 管理 ,售后 服务 管理 等 , 它 将 更 进一步 地 优化 企业 现 有 的 服务 体系 ,实现 公司 对 分 公 
司 、 经 销 商 、 售 后 服务 商 、 消 费 者 的 有 效 管理 ,加 速 企 业 的 信息 流 ,资金 流 、 物 流 的 运转 效率 ， 
降低 企业 经 营 成 本 ,为 企业 创造 额外 收益 ,降低 企业 经 营 成 本 。 


8.1.4 媒体 信息 类 网 站 


这 类 网 站 是 报社 ,杂志 社 、 广 播 电 台 、 电 视 台 等 传统 媒体 为 了 树立 网 上 形象 ,发 布 网 络 新 
闻 信息 ,提供 艺术 欣 党 博客、 论坛、 地 图 、 旅 游 知道 天 气 预报 等 服务 而 建立 的 网 站 ,如 图 8-5 
中 央 网 络 电 视 台 。 该 类 网 站 的 主要 功能 如 下 : 

信息 发 布 : 通过 信息 发 布 .将 报社 杂志 社 的 文章 以 及 视频 新 闻 快 速 , 方 便 地 上 传 到 网 
上 ,电台 、 电 视 台 则 可 向 观众 提供 电视 节目 表 等 信息 。 

电子 出 版 : 报社 杂志 可 以 根据 需要 , 设 定 一 定数 量 的 网 站 专栏 ,发布 电子 版 。 电 台 、 电 
视 台 可 以 在 网 上 有 选择 地 发 布 已 播 出 的 节目 供用 户 收看 收听。 

客户 在 线 咨询 : 将 各 种 最 新 公告 几时 通报 给 读者 ,特约 记者 和 广告 客户 ,读者 可 以 通过 


172 


网 页 设计 与 网 站 规划 


3 FII 
сотая Сештяяке ат 入- 日 S- заш. яға. rao- e- 


中 国 网 结 电视 台 www cvcv tinto ета жиз 


Ma eza «шта mas emra mes тта Жш 


надана тушсш. BREE сем. ағжанех 


图 8-5 


网 站 向 编辑 部 提出 意见 和 建议 ,广告 客户 可 以 像 广告 部 提交 广告 订单 ,特约 记者 可 以 通过 网 
站 实现 在 线 投递 稿件 等 。 

网 站 管理 : 使 用 对 象 是 系统 管理 员 和 网 站 编辑 ,主要 包括 用 户 及 权限 设置 .数据库 维 
护 、 网 页 设置 .标志 与 标题 设置 及 网 站 各 栏目 内 容 编 辑 等 功能 。 

博客 : 提供 名 人 或 向 展示 自己 才能 的 人 集中 发 表 观点 的 平台 ,发 表 个 人 的 观点 、 展 现 个 
人 的 特长 .回答 客户 的 问题 ,吸引 追星 族 访问 网 站 ,建立 名 人 和 普通 客户 的 沟通 渠道 等 。 

论坛 BBS; 提供 客户 对 一 些 热点 问题 发 表 言论 的 平台 ,充分 体现 Internet 上 人 人 平等 、 
自由 发 表 言论 的 权利 ,这 是 传统 信息 媒体 所 不 具有 的 。 

聊天 : 提供 客户 在 线 互相 交流 的 平台 ,改变 了 传统 信息 交流 的 方式 。 

服务 : 提供 免费 E-mail、 网络 存储 、 艺 术 欣 赏 、 地 图 、 旅 游 知道 天 气 预 报 等 服务 ,以 吸引 
更 多 客户 尽 可 能 长 时 间 地 停留 在 该 网 站 。 


8.1.5 办 公事 务 管理 网 站 


这 类 网 站 是 企业 .事业 单位 为 了 实现 办 公 自 动 化 而 建立 的 内 部 网 站 ,又 可 称 为 OA Ж 
统 ,主要 功能 如 下 。 

办 公事 务 管理 : 主要 包括 公文 与 文档 管理 .公告 大事记、 会 议 纪 要 、 资 产 与 办 公用 品 管 
理 、 行 政 管理 规章 制度 ,办 公事 务 讨论 等 。 

人 力 资源 管理 : 主要 包括 员工 档案 、 岗 位 职责 、 员 工 通讯 录 、 认 识 管理 规范 等 。 

财务 资产 管理 : 主要 包括 固定 资产 管理 、 工 资 管理 ,经 费 管理 等 。 
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网 站 管理 : 主要 包括 用 户 及 权限 设置 .数据 库 维护 ,网 页 设置 .标志 与 标题 设置 及 网 站 
各 栏目 内 容 编辑 等 功能 。 


8.1.6 娱乐 性 网 站 


Internet 不 仅 可 以 提供 信息 咨询 ,政务 管理 .电子 商务 管理 .电子 商务 等 服务 ,还 可 以 为 
客户 提供 一 个 娱乐 的 大 平台 ,Internet 也 彻底 改变 了 过 去 的 娱乐 游戏 模式 , Internet 游戏 更 
具有 魅力 .更 具有 诱惑 力 ,Internet 娱乐 性 网 站 使 人 与 虚拟 现实 浑然 一 体 ,这 类 网 站 使 玩 游 
戏 的 人 有 一 种 梦幻 .痴迷 的 感觉 , Internet 娱乐 性 网 站 是 一 种 朝气 蓬勃 的 、 很 具 市 场 潜力 的 
网 站 。 这 类 网 站 主要 有 游戏 介绍 ` 游 戏 规则 ,游戏 试 玩 、 在 线 游戏 、 游 戏 下 载 、 会 员 、 论 坛 等 功 
能 。 现 在 的 游戏 网 站 有 中 国 游 戏 中 心 . 联 众 世 界 、 新 浪 游 戏 等 ;承载 悠闲 网 页 游戏 的 知名 社 
交 网 站 有 Facebook 和 开心 网 ,如 图 8-6 所 示 。 


=. (ТҮР 


rsen овет 
вай 


живяли 


8.2 定位 网 站 主题 与 名 称 


准备 设计 一 个 站 点 时 ,首先 考虑 的 问题 就 是 如 何 定位 网 站 主题 。 网 站 定位 是 否 准确 合 
理 ,直接 影响 到 网 站 的 整体 建设 和 发 展 。 一 般 的 网 站 都 有 明确 的 定位 ,例如 :“ 服 务 于 中 国 
及 全 球 华人 社 群 的 领先 在 线 媒体 及 增值 资讯 服务 提供 商 ” 是 新 浪 的 定位 ,“ 中 国 最 领先 的 新 
媒体 、 电 子 商务 、 通 信 及 移动 增值 服务 公司 ”是 搜狐 的 定位 。 百 度 则 声称 要 “根植 于 博大 精 
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深 的 中 文 世 界 ,专注 于 做 最 优秀 的 中 文 搜索 引擎 ”, 可 以 看 出 网 站 的 定位 将 主导 网 站 的 成 败 
与 发 展 。 

我 们 说 的 主题 具体 地 说 就 是 网 站 的 题材 。 随 着 网 络 的 发 展 ,网 站 题材 日 益 丰富 ,很 容易 
找到 自己 选择 的 内 容 。 美 国 (个 人 电脑 ) 杂 志 (PC Magazine) 评 出 的 1999 年 度 排名 前 100 位 
的 全 美 知名 网 站 的 十 类 题材 ,可 供 我 们 参考 。 

第 1 类 : 网 上 求职 

第 2 类 : 网 上 聊天 /即时 信息 /ICQ 

第 3 类: 网 上 社区 /讨论 /邮件 列表 

第 4 类 : 计算 机 技术 

第 5 类 : 网 页 /网 站 开发 

第 6 类 : 娱乐 网 站 

第 7 类 : 旅行 

第 8 类 : 参考 /资讯 

第 9 类 : 家 庭 / 教 育 

第 10 Ж: 生活 /时 尚 

在 十 个 大 类 中 还 可 以 继续 细 分 ,比如 新 闻 可 为 军事 /评论 ,体育 分 为 NBA/CBA/ 中 超 ， 
娱乐 分 为 电影 /电视 /音乐 等 。 除 了 最 常见 的 题材 ,还 有 许多 专业 的 、 另 类 的 、 独 特 的 题材 可 
以 选择 ,比如 中 医 、 热 带鱼 、 天 气 预 报 等 ,同时 ,各 个 题材 相 联 系 和 交叉 结合 可 以 产生 新 的 题 
材 , 例 如 旅游 论坛 (旅游 十 讨论 ) ,经 典 入 球 播放 (足球 十 影视 ) 等 , 按 这 样 分 下 去 ,题材 可 以 有 
成 下 上 万 个 ,如 今 人 们 设计 网 站 将 不 会 再 为 题材 的 选择 而 烦恼 了 。 

题材 确定 以 后 ,就 可 以 围绕 题材 给 网 站 起 一 个 名 字 。 网 站 名 称 一 般 出 现在 网 站 首页 上 ， 
起 到 区 别 网 站 的 目的 ,网 站 名 称 选 择 也 是 网 站 设计 的 一 部 分 ,而 且 是 很 关键 的 一 个 的 因素 。 
网 站 的 名 称 是 网 站 内 容 的 高 度 概括 ,所 以 名 称 的 选择 首先 要 准确 、 符 合 事实 ,其 次 要 标准 化 
容易 记忆 、 有 特色 。 网 站 的 命名 要 符合 国情 .在 国内 尽 可 能 用 中 文 来 命名 ,不 要 使 用 英文 或 
者 中 英文 混合 型 名 称 。 网 站 的 名 称 如 果 能 体现 一 定 的 内 涵 , 给 浏览 者 更 多 的 视觉 冲击 和 空 
间 想 象 力 则 会 对 网 站 的 推广 有 很 好 的 效果 。 


8.2.1 网 站 设计 主题 分 析 


随 着 网 络 的 发 展 和 普及 ,网 络 可 以 为 用 户 提 供 许多 形形色色 的 服务 ,例如 ,在 网 上 浏览 
新 闻 ,搜索 信息 ,收发 电子 邮件 、 网 上 销售 、 网 上 购物 、 网 上 教育 、 即 时 通讯 .网络 游戏 、 网 络 会 
议 \ 收 听 在 线 广播 收看 在 线 电 影 、 上 传 下 载 文件 .参与 网 络 社区 等 都 是 网 络 用 户 经 常 使 用 的 
网 络 服务 或 功能 。 这 些 大 多 都 以 网 站 或 借助 网 站 的 形式 为 用 户 服务 。 网 站 的 类 型 也 随 着 用 
户 的 需要 和 网 络 技术 的 发 展 不 断 发 生变 化 。 网 站 的 不 同 主体 性 质 、 建 设 网 站 的 目的 和 网 站 
的 覆盖 面积 等 因素 对 网 站 的 需求 有 重要 的 影响 。 

1. 网 站 的 主体 性 质 

网 站 按照 主体 性 质 不 同 分 为 政府 网 站 ,企业 网 站 、 商 业 网 站 、 教 育 科研 机 构 网 站 ,个 人 网 
站 、 其 他 非 鳃 利 机 构 网 站 等 。 通 过 对 网 站 的 拥有 者 进行 鉴别 ,可 以 很 快 地 判断 出 网 站 的 目标 
和 可 能 包含 的 内 容 。 如 政府 网 站 是 为 民众 提供 服务 的 ;企业 网 站 是 为 了 让 用 户 了 解 产品 的 
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详细 情况 ,促进 销售 ;商业 网 站 是 一 些 以 盘 利 为 目的 的 群体 ,为 用 户 提供 有 偿 的 服务 ;教育 科 
研 机 构 网 站 的 目的 是 为 了 促进 学 术 交 流 与 合作 ;个 人 网 站 是 以 展示 自我 ,和 其 他 人 分 享 生活 
和 工作 的 乐趣 经验 为 目的 ; 非 盘 利 机 构 以 为 用 户 提供 免费 的 服务 和 信息 为 己任 。 

2. 建设 网 站 的 目的 

建设 网 站 是 为 了 满足 用 户 的 需求 ,而 用 户 的 需求 千变万化 、 多 种 多 样 , 所 以 网 站 的 分 类 
也 纷繁 复杂 。 典 型 的 网 站 服务 和 功能 有 提供 信息 、 提 供 服务 、 提 供 娱乐 .提供 讨论 空间 发布 
通知 和 布告 .出 售 产品 .宣传 产品 ,发 展会 员 等。 建设 网 站 应 该 有 清晰 的 目的 ,开发 设计 人 员 
要 对 这 个 目的 有 深刻 的 认识 ,选择 适当 的 技术 ,用 能 够 突出 网 站 优点 和 特色 的 方法 设计 出 成 
功 的 网 站 。 

3. 网 站 的 覆盖 面 

网 站 可 以 分 为 内 部 网 站 和 外 部 网 站 。 内 部 网 站 只 是 供 局 域 网 用 户 或 通过 特定 专用 网 络 
的 用 户 访问 。 例 如 公司 内 部 的 网 络 办 公 系 统 ,学 校 的 教学 管理 系统 等 。 外 部 网 站 是 通过 互 
联网 可 以 让 用 户 自由 访问 的 网 站 。 

除 此 之 外 ,还 可 以 按照 网 站 的 规模 分 为 小 型 网 站 、 中 型 网 站 和 大 型 网 站 。 网 站 的 规模 可 
以 按照 网 站 存储 的 信息 来 衡量 ,也 可 以 按 网 站 每 日 或 每 周 的 访问 量 来 衡量 。 还 可 以 按照 网 
站 建设 的 技术 分 为 静态 网 站 和 动态 网 站 。 静 态 网 站 是 以 独立 文件 的 方式 来 存 取信 息 , 网 站 
被 发 布 以 后 ,内 容 相对 固定 不 变 ,网 站 规模 比较 小 ,交互 性 差 , 难 以 维护 。 动 态 网 站 是 指 以 数 
据 库 的 方式 存 取信 息 的 ,网 站 可 根据 管理 者 的 需求 或 用 户 浏览 的 状态 自动 更 新 网 站 的 信息 ， 
具有 良好 的 交互 性 。 


8.2.2 网 站 的 名 称 分 析 


网 站 目的 和 功能 确定 后 网 站 主题 就 确定 了 ,围绕 主题 应 该 给 网 站 取 一 个 适宜 的 名 字 。 
网 站 名 称 也 是 网 站 设计 的 一 部 分 ,而 且 是 非常 关键 的 一 个 因素 , 它 能 展现 网 站 的 主题 ,如 果 
你 已 经 有 一 个 绝妙 的 主意 了 , 那 我 们 开始 为 网 站 起 名 字 。 你 可 能 认为 起 名 字 与 网 站 设计 无 
关 , 在 这 里 浪费 时 间 。 其 实 网 站 名 称 也 是 网 站 设计 的 一 部 分 ,而 且 是 关键 的 一 个 要 素 。 比 
如 ,“ 电 脑 学 习 室 "和 “电脑 之 家 ”显然 是 后 者 简练 ;“ 迷 笛 乐园 "和 “MIDI 乐园 "显然 是 后 者 明 
晰 ;* 儿 童 天 地 ”和 “中 国 幼儿 园 " 显 然 是 后 者 大 气 。 

而 网 站 域名 和 名 称 一 样 ,网 站 域名 是 否 正 气 、 响 亮 , 易 记 , 对 网 站 的 形象 和 宣传 推广 也 有 
很 大 影响 。 

一 般 的 建议 是 : 

1. 名 称 要 “正点 ” 

“正点 ”这 个 词 是 通俗 的 说 法 ,其 实 就 是 要 合法 、 合 理 、 合 情 。 不 能 用 反动 的 .色情 的 、 迷 
信和 的、 危害 社会 安全 的 名 词 .语句 ,其 次 名 称 和 域名 尽量 起 避免 和 文化 有 冲突 的 名 字 。 

2. 名 称 要 易 记 

根据 中 文 网 站 浏览 者 的 特点 ,除非 特定 需要 ,网 站 名 称 最 好 用 中 文 名 称 , 不 要 使 用 英文 
或 者 中 英文 混合 型 名 称 。 例 如 beyond studio 和 超越 工作 室 , 后 者 更 亲切 好 记 。 另 外 ,网 站 
名 称 的 字数 应 该 控制 在 6 个 字 ( 最 好 4 个 字 ) 以 内 ,比如 “XX F7 XX 设计 室 ”,4 个 字 的 可 
以 用 成 语 ,如 “一 网 打 尽 ”。 字 数 少 还 有 个 好 处 ,一 般 友 情 链 接 的 小 Logo 尺寸 是 88X31, 而 
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6 个 字 的 宽度 是 78 左右 ,适合 于 其 他 站 点 的 链接 排版 ;或 者 使 用 英文 单词 组 合 , 便 于 用 户 把 
域名 和 网 站 名 称 联系 起 来 记忆 ;也 可 以 用 网 站 名 称 的 谐音 组 合成 自助 词 , 如 搜狐 的 www. 
sohu. com, 

3. 名 称 要 有 特色 

名 称 平实 就 可 以 接受 ,如 果 能 体现 一 定 的 内 涵 , 给 浏览 者 更 多 的 视觉 冲击 和 空间 想象 
力 , 则 为 上 品 。 这 里 举 几 个 笔者 自 认为 很 好 的 名 称 : 音乐 前 卫 , 网 页 陶 吧 ,天籁 绝 音 。 它 们 
都 能 在 体现 出 网 站 主题 的 同时 ,点 出 特色 之 处 。 

4. 尽量 选择 顶级 域名 

有 国际 用 户 的 网 站 ,要 注册 一 个 国际 顶级 域名 。 如 果 面 向 特定 国家 的 用 户 服务 ,还 必须 
使 用 该 国家 的 顶级 域名 。 使 用 国家 顶级 域名 不 但 可 以 把 网 站 定位 成 特定 国家 的 网 站 ,也 有 
助 于 将 网 站 的 语言 和 内 容 本 地 化 。 例 如 联想 集团 自 收购 了 IBM EER PC 业务 以 来 ,用 户 遍 
布 全 球 。 当 用 户 第 一 次 访问 www. lenovo. com 时 ,该 域名 会 指向 联想 全 球 网 站 ,联想 全 球 
网 站 提供 了 指向 不 同 国家 或 地 区 顶级 域名 的 链接 。 

总 之 ,定位 题材 和 名 称 是 设计 一 个 网 站 的 第 一 步 ,也 是 很 重要 的 一 部 分 。 如 果 能 找到 一 
个 满意 的 名 称 , 即 使 花 时 间 去 查 字典 找 资料 也 是 值得 的 。 定 位 题材 和 名 称 是 设计 一 个 网 站 
的 第 一 步 ,也 是 很 重要 的 一 部 分 。 


8.3 确定 网 站 内 容 


好 的 内 容 选 择 需要 有 好 的 创意 ,作为 网 站 设计 者 ,最 苦恼 的 就 是 没有 好 的 内 容 创意 。 创 
意 的 目的 是 为 了 更 好 地 宣传 与 推广 网 站 ,如果 创 意 不 好 ,网 站 发 展 将 非常 困难 并 将 变 得 毫 无 
意义 ,那么 网 站 设计 者 也 应 当 放 弃 这 个 创意 。 成 功 网 站 的 最 大 秘诀 在 于 让 用 户 感到 网 站 对 
他 们 非常 有 用 ,内 容 的 选择 、 独 特 的 创意 依然 是 网 站 成 功 的 关键 。 在 确定 网 站 内 容 前 ,需要 
清楚 网 站 内 容 的 分 类 、 设 计 原则 以 及 常规 网 站 应 该 包括 的 内 容 。 


8.3.1 网 站 内 容 的 分 类 


网 站 的 内 容 包括 很 多 ,从 技术 角度 看 将 网 站 的 内 容 分 为 静态 内 容 和 动态 内 容 两 个 部 分 。 

1. 静态 内 容 

网 站 的 静态 内 容 是 指 网 站 内 容 中 相对 不 变 的 部 分 , 它 的 主要 作用 是 维持 整个 网 站 的 风 
格 , 给 访问 者 一 个 熟悉 的 浏览 环境 。 静态 页 面 的 工作 原理 是 : 当 浏览 器 通过 Internet 的 
HTTP 协议 向 站 点 服务 器 要 求 提 供 主页 的 内 容 时 ,站 点 服务 器 收 到 要 求 后 就 传送 已 设计 好 
的 HTML 文件 数据 给 浏览 者 。 在 网 站 中 网 站 的 标志 、 版 头 、 广 告 栏 ,各 个 页 面 共享 的 超级 
链接 等 ,这 些 都 属于 静态 内 容 ,它们 共同 维持 了 页 面 的 整体 结构 ,如 果 轻 易 变动 这 些 内 容 , 必 
将 使 访问 者 产生 疑问 ,是 不 是 走 错 了 地 方 。 所 以 .为 了 保持 网 站 的 形象 ,应 该 对 网 站 的 静态 
内 容 进行 周密 的 设计 ,并 加 入 一 些 让 人 感到 舒适 的 创意 。 

2. 动态 内 容 

网 站 的 动态 内 容 是 网 站 内 容 中 的 主题 部 分 ,也 是 访问 者 主要 浏览 的 内 容 , 它 以 交互 方式 
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呈现 。 因 此 ,应 该 пие ого 哪些 内 容 应 该 放 在 网 站 动态 内 容 
的 位 置 上 。 要 实现 一 个 可 与 用 户 交互 信息 的 服务 系统 ,所 需 增 加 的 内 容 有 两 项 : 交互 式 页 
nan deam. 从 技术 角度 讲 , 网 页 的 动态 内 容 通常 存放 在 网 站 后 台 的 数据 
库 里 ,通过 运行 用 ASP 和 CGI 等 语言 编写 的 服务 器 端 程序 ,自动 生成 HTML 代码 (网 页 ) 
再 送 往 浏览 器 。 这 样 做 的 好 处 是 ,更 新 内 容 方便 ,维护 简单 ,便于 管理 。 


8.3.2 网 站 内 容 设计 原则 


1. 兼容 性 

对 于 网 页 设计 人 员 来 说 ,在 设计 网 页 的 时 候 , 最 麻烦 ,以 及 最 令 人 头疼 的 问题 就 是 如 何 
确保 自己 设计 的 网 页 可 以 在 使 用 不 同 内核 的 浏览 器 上 都 能 正常 显示 。 而 对 于 一 般 用 户 来 
说 ,最 头疼 的 问题 则 可 能 是 某 个 重要 的 网 站 在 自己 常用 的 浏览 器 中 无 法 正常 显示 ,需要 使 用 
其 他 浏览 器 。 由 于 不 同 浏览 器 的 解释 方法 不 尽 相 同 , 所 以 在 网 页 设计 时 要 充分 考虑 到 这 一 
点 ,让 所 有 的 浏览 器 都 能 够 正常 浏览 。 

2. 便捷 性 

网 站 信息 的 组 织 没 有 任何 简单 快捷 的 方法 ,吸引 用 户 的 关键 在 于 总 体 结构 要 层次 分 明 ， 
应 该 尽量 避免 形成 复杂 的 网 状 结 构 。 网 状 结构 不 仅 不 利于 用 户 查 找 感 兴趣 的 内 容 , 而 且 在 
信息 不 断 增多 后 还 会 使 维护 工作 非常 困难 。 

3. 适量 性 

图 像 声音 和 视频 信息 能 够 比 普通 文本 提供 更 丰富 和 更 直接 的 信息 ,产生 更 大 的 吸引 
力 ,但 文本 字符 可 提供 较 快 的 浏览 速度 。 因 此 ,图 像 和 多 媒体 信息 的 使 用 要 适中 ,减少 文件 
数量 和 大 小 是 必要 的 。 

4. 可 视 性 

一 般 来 说 ,主页 是 一 个 网 站 中 最 重要 的 网 页 ,也 是 访问 最 频繁 的 网 页 ,如 何 提 高 首页 的 
可 视 性 是 设计 的 一 个 重点 。 首 页 是 一 个 网 站 的 灵魂 ,体现 了 整个 网 站 的 制作 风格 和 性 质 , 主 
页 上 通常 会 有 整个 网 站 的 导航 目录 ,所 以 主页 也 是 一 个 网 站 的 起 点 站 或 者 说 主 目录 。 对 于 
任何 网 站 ,主页 或 第 一 个 网 页 都 是 非常 重要 的 ,因为 它们 能 够 给 用 户 很 深 的 第 一 印象 ,好 的 
第 一 印象 能 够 吸引 用 户 再 次 光顾 这 个 网 站 。 

5. 动态 性 

网 站 内 容 应 该 是 动态 的 ,随时 进行 修改 和 更 新 ,以 使 自己 的 网 站 紧 跟 潮流 。 在 主页 上 注 
明 更 新 日 期 及 URL 对 于 经 常 访问 的 用 户 非常 有 用 。 

6. 实用 性 

网 页 中 应 该 提供 一 些 联机 帮助 功能 , 千 万 不 能 让 用 户 不 知 所 措 。 网 页 的 文本 内 容 应 简 
单 明 了 、 通 俗 易 懂 。 所 有 内 容 都 要 针对 设计 目标 选择 ,不 要 节 外 生 枝 。 不 能 出 现 语法 错误 和 
错别字 。 


8.3.3 网 站 应 该 包括 的 十 项 内 容 


按照 国外 制作 英文 网 站 的 要 求 ,一 个 标准 的 网 站 应 该 包括 以 下 10 项 内 容 。 
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1. 站 点 结构 图 

站 点 结构 图 是 关于 站 点 组 织 方式 的 示意 图 。 站 点 的 主要 栏目 或 者 关键 内 容 列 在 其 下 的 
副标题 中 。 当 访问 者 单 击 标题 .题目 或 副标题 时 ,相关 的 网 页 就 会 出 现在 屏幕 当中 。 站 点 结 
构图 还 可 以 被 看 做 是 站 点 的 分 级 结构 图 ,以 这 种 方式 组 织 起 来 的 信息 可 以 使 访问 者 迅速 找 
到 信息 所 在 的 位 置 。 站 点 结构 图 与 导航 栏 的 区 别 是 : 站 点 结构 图 可 以 ,也 应 该 包括 与 导航 
栏 类 似 的 链接 供用 户 单 击 至 相关 网 页 ,但 它 并 不 是 一 个 单纯 的 导航 工具 , 它 的 目的 在 于 提供 
独立 的 、 更 详细 的 站 点 结构 概况 。 

2. 导航 栏 

每 个 网 站 都 应 该 包括 一 组 导航 工具 , 它 出 现在 此 网 站 的 每 一 个 页 面 中 , 称 为 导航 栏 。 导 
航 栏 中 的 按钮 应 该 包括 主页 联系 方式 、 反 馈 及 其 他 一 些 用 户 感 兴趣 的 内 容 。 这 些 内 容 应 该 
与 站 点 结构 图 中 的 主要 题目 相关 联 。 设 计 导 航 栏 应 该 注意 以 下 几 点 : 

CD. 图 片 比 单纯 的 文字 效果 更 佳 ,但 它 必须 能 够 清楚 地 体现 出 它 所 连接 的 内 容 。 图 片 
下 应 附 有 文字 说 明 ,以 避免 图 片 使 用 不 当 而 引起 的 混淆 。 

(2) 无 任何 链接 的 内 容 不 要 做 成 按钮 的 形式 。 

(3) 使 用 常用 颜色 。 应 该 使 用 标准 、 醒 目的 颜色 ,避免 在 链接 处 使 用 特殊 的 颜色 。 

СА) 当前 页 面 所 对 应 的 按钮 应 该 相应 地 变 成 灰色 .突出 显示 或 以 其 他 方式 表示 出 来 。 

(5) 每 个 页 面 都 应 该 包括 代表 “返回 ”或 “前 进 ” 按 钮 。 

3. 联系 方式 页 面 

在 此 页 面 中 创建 可 发 送 E-mail 的 链接 ,使 E-mail 地 址 可 以 自动 地 出 现在 “ 收 信人 ” 栏 
中 。 这 样 ,访问 者 在 录入 相关 内 容 后 单 击 “ 发 送 ” 按 钮 即 可 完成 发 送 操作 。 此 页 面 还 应 包括 
其 他 联系 方式 ,如 通信 地 址 及 联系 人 传真 .电话 号 码 等 。 在 导航 栏 中 应 能 够 很 方便 地 找到 
这 些 信息 。 

4. 反馈 表 

利用 反馈 表 , 用 户 可 以 随时 提出 信息 需求 ,而 不 必 记 下 电话 号 码 。 反 馈 表 还 为 那些 没有 
E-mail 的 用 户 提供 了 方便 。 有 了 反馈 表 , 可 以 选择 是 以 寄 信 件 、 发 E-mail, 还 是 打 电 话 的 方 
式 与 用 户 联系 ,每 个 反馈 表 都 是 一 个 不 断 提 高 服务 质量 以 满足 用 户 需求 的 机 会 。 从 反馈 表 
中 可 以 发 现在 你 的 网 站 中 哪些 信息 是 重要 的 ,哪些 是 无 关 紧 要 的 。 还 可 以 考虑 加 设 消息 栏 。 
用 户 可 以 在 此 发 表 一 些 评论 ,提出 问题 。 这 不 仅 可 以 使 用 户 与 你 保持 联系 ,也 可 以 让 他 们 互 
相 之 间 进 行 交流 。 

5. 引人入胜 的 内 容 

在 每 页 中 都 要 包含 相关 的 .引人入胜 的 内 容 , 特 别 是 当 你 要 销售 产品 的 时 候 , 要 为 商品 
附 上 详细 的 内 容 和 精美 的 图 片 。 因 为 你 的 目的 是 为 了 吸引 客户 ,所 以 网 站 上 所 使 用 的 语言 
也 应 该 通俗 易 懂 ,对 专业 用 语 及 技术 术语 要 进行 解释 。 特 别 重要 的 内 容 用 符号 标记 出 来 ,但 
不 要 用 得 过 多 ,以 保持 页 面 的 简洁 。 不 要 把 网 站 建成 单纯 的 网 上 介绍 。 

6. 常见 问题 解答 

创建 FAQs 可 以 避免 重复 回答 相同 的 问题 以 节省 管理 者 和 访问 者 的 时 间 和 精力 。 可 
以 将 问题 列 于 FAQs 页 面 的 和 上 部 ,并 将 每 个 问题 与 回答 链接 在 一 起 。 另 外 ,要 确认 在 导 
航 栏 中 包含 有 FAQs 按钮 。 
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7. 精美 的 图 片 
图 片 不 要 用 得 过 多 ,要 选择 合适 的 无 需 太 多 内 存 及 下 载 时 间 的 图 片 。 可 以 降低 图 片 精 
度 , 对 每 页 的 文字 和 图 像 进行 限制 ,或 创建 纯 文 本 的 版 本 。 

8. 搜索 工具 

用 户 可 以 在 搜索 工具 中 输入 关键 词 或 词组 ,在 单 击 查询 按钮 后 ,与 关键 词 相 关 的 网 页 列 
表 就 会 出 现在 屏幕 上 。 注 意 要 提供 关于 有 效 查 询 的 说 明 。 

9. 新 闻 页 面 

引导 用 户 访问 新 信息 有 以 下 几 种 方法 : 

(1) 在 最 新 更 新 的 信息 边 加 注 一 个 亮丽 的 小 图 标 * 新 !”。 

(2) 为 最 新 消息 创建 单独 页 面 ,并 在 一 段 时 间 后 将 其 移 到 适当 的 目录 中 。 

(3) 在 主页 或 每 个 页 面 下 加 注 一 行文 字 , 表 明 本 网 站 或 每 个 单独 的 页 面 最 近 一 次 被 更 
新 的 时 间 。 

10. 相关 站 点 链接 

好 的 站 点 通常 都 可 以 链接 到 其 他 相关 站 点 以 提供 更 多 信息 ,对 每 个 链接 都 要 做 简单 说 
明 , 并 对 它 被 链接 的 原因 进行 阐述 ,这 些 信息 可 以 帮助 访问 者 选择 最 适合 其 需求 的 站 点 。 定 
期 访问 各 链接 站 点 ,删除 那些 * 死 ”站 点 ,以免 使 访问 者 感到 厌烦。 维护 工作 每 周一 次 就 足够 
了 ,但 要 持之以恒 。 内 容 是 网 站 吸引 浏览 者 最 重要 的 因素 ,内 容 少 或 信息 不 实用 的 网 站 无 法 
吸引 匆匆 浏览 的 访客 。 建 议事 先 对 人 们 希望 阅读 的 信息 进行 调查 ,并 在 网 站 发 布 后 调查 人 
们 对 网 站 内 容 的 满意 度 , 以 便 及 时 调整 网 站 内 容 。 


8.4 ”网 站 界面 规划 


界面 是 网 站 给 浏览 者 的 第 一 印象 ,往往 决定 了 网 站 的 观赏 性 。 界 面 设计 要 让 人 看 着 舒 
服 ,不 求 华丽 , 尽 可 能 简洁 实用 。 在 界面 规划 中 应 该 考虑 的 问题 如 下 。 


8.4.1 栏目 与 板块 编排 


构建 一 个 网 站 就 好 比 写 一 篇 论文 ,首先 要 列 出 提纲 ,才能 主题 明确 .层次 清晰 。 初 学 者 
最 容易 犯 的 错误 就 是 确定 题材 后 就 立刻 开始 制作 ,根本 没有 进行 合理 规划 ,出 现 的 问题 是 网 
站 结构 不 清晰 、 目 录 杂 乱 ,板块 编排 混乱 等 。 如 果 栏 目 设计 不 合理 ,使 用 者 会 看 得 糊 里 糊涂 ， 
设计 者 在 扩充 和 维护 网 站 时 也 相当 困难 。 所 以 ,在 动手 制作 网 页 前 ,一 定 要 考虑 好 栏目 和 板 
块 的 编排 问题 。 

网 站 的 题材 确定 后 ,就 要 将 收集 到 的 资料 内 容 作 一 个 合理 的 编排 。 比 如 ,将 一 些 最 吸引 
人 的 内 容 放 在 最 突出 的 位 置 或 者 使 之 在 版 面 分 布 上 占 优势 地 位 。 栏 目 实质 是 一 个 网 站 的 大 
纲 索引 ,栏目 的 设置 应 该 突出 网 站 的 主题 。 编 排 栏目 时 需要 注意 的 是 : 

° 突出 主题 ,栏目 的 选择 要 紧 扣 主题 ,与 主题 无 关 的 栏目 尽 可 能 删除 。 

。 网 站 的 导航 与 指南 栏目 要 适合 浏览 者 的 习惯 , 尽 可 能 从 访问 者 角度 来 编排 栏目 以 方 

便 访问 者 的 浏览 和 查询 。 
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可 能 将 网 站 内 最 有 价值 的 内 容 列 在 栏目 上 。 
可 喧 宾 夺 主 ,辅助 内 容 要 避免 冲淡 主题 。 如 网 站 简介 、 版 权 信息 、 个 人 信息 等 不 必 
在 主 栏目 里 。 
板块 的 编排 设置 也 要 合理 安排 与 划分 。 

板块 比 栏目 的 概念 要 大 一 些 , 每 个 板块 可 以 有 自己 的 栏目 。 一 般 来 说 ,个 人 网 站 内 容 较 
少 , 只 要 分 栏目 就 够 了 ,不 需要 设置 板块 。 如 需要 设置 板块 的 ,应 该 注意 以 下 几 点 : 

° 各 板块 要 有 相对 独立 性 。 

。 板块 之 间 要 相互 关联 。 

° 各 板块 的 内 容 要 围绕 网 站 主题 。 


. 不 


ж > m 


8.4.2 目录 结构 与 链接 结构 


网 站 的 目录 是 指 建立 网 站 时 创建 的 目录 。 目 录 的 结构 是 一 个 容易 被 忽略 的 问题 ,如 果 
不 进行 仔细 的 规划 ,文件 没有 分 类 管理 ,目录 结构 不 清晰 ,对 网 站 的 上 传 维护 ,内容 扩充 和 移 
植 都 有 重要 的 影响 。 因 此 ,建立 目录 结构 时 也 要 和 仔细 安排 ,下 面 提 几 条 原则 性 建议 : 

1. 根 目录 下 的 文件 数量 要 尽 可 能 少 

一 个 有 规划 的 网 站 不 可 能 将 所 有 的 文件 都 在 一 个 根 目录 下 ,因为 这 样 做 会 给 网 站 维护 
带 来 如 下 间 题 ,首先 ,文件 管理 非常 混乱 ,使 我 们 不 清楚 哪些 文件 需要 编辑 和 更 新 ,哪些 无 用 
的 文件 可 以 删除 ,以 及 哪些 是 相互 关联 的 文件 ,严重 影响 工作 效率 。 其 次 , 根 目录 文件 太 多 
将 影响 到 网 站 上 传 的 速度 。 服 务 器 一 般 都 会 为 根 目录 建立 一 个 文件 索引 ,如 果 将 所 有 文件 
都 放 在 根 目录 下 ,那么 即使 只 上 传 一 个 文件 ,服务 器 也 需要 将 所 有 文件 再 检索 一 遍 , 并 建立 
新 的 索引 文件 ,那么 文件 量 越 大 ,等 待 时 间 也 就 越 长 。 所 以 ,建议 不 要 将 所 有 文件 都 存放 在 
根 目录 下 。 

2. 按 栏目 内 容 建立 子 目 录 

按 栏目 建立 子 目录 具有 实用 、 快 捷 、 易 记忆 的 特点 。 例 如 :“ 网 上 书店 ”电子 商务 网 站 可 
以 根据 书籍 的 类 别 分 别 建立 相应 的 目录 ;需要 经 常 更 新 的 可 以 建立 独立 的 子 目录 ;程序 文件 
一 般 都 存放 在 特定 目录 里 ,例如 ,CGI 程序 放 在 cgi-bin 目录 中 ;所 有 提供 下 载 的 内 容 也 最 好 
放 在 一 个 目录 下 ,便于 维护 管理 。 

3. 根据 栏目 建立 独立 的 Images 目录 

系统 默认 情况 下 ,每 个 网 站 根 目录 下 有 一 个 默认 的 Images 目录 ,如 果 将 所 有 图 片 都 存 
放 在 根 目录 里 很 不 方便 ,比如 栏目 更 新 时 或 删除 栏目 时 ,图 片 的 处 理 相当 麻烦 ,好 的 处 理 是 
为 每 个 主 栏目 建立 一 个 独立 Images 目录 。 

4. 其 他 注意 事项 

(1) 目录 的 层次 一 般 不 要 超过 三 层 , 这 样 便于 维护 。 

(2) 目录 命名 不 要 使 用 中 文 ,中文 目 录 名 可 能 对 网 址 的 正确 显示 造成 干扰 。 

(3) 不 要 使 用 过 长 的 目录 名 , 太 长 的 名 字 不 便于 记忆 。 

(4) 目录 名 一 般 使 用 简单 的 英文 单词 或 者 汉语 拼音 及 其 缩写 形式 。 

网 站 的 链接 结构 是 指 页 面 之 间 相互 链接 的 拓扑 结构 。 它 建立 在 目录 结构 基础 之 上 ,但 
可 以 跨越 目录 。 一 般 网 站 的 链接 结构 有 两 种 基本 方式 : 
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t 树 状 链接 结构 。 类 似 DOS 的 目录 结构 ,首页 链接 指向 一 级 页 面 , 一 级 页 面 链接 指向 
二 级 页 面 。 浏 览 时 ,一 级 级 进入 ,一 级 级 退出 ,条 理 比 较 清晰 ,浏览 者 可 明确 知道 自 
己 在 什么 位 置 ,但 是 浏览 效率 低 ,要 从 一 个 栏目 下 的 子 页 面 转 到 另 一 个 栏目 下 的 子 
页 面 ,必须 回 到 首页 才能 进行 。 
。 星 状 链接 结构 。 每 个 页 面相 互 之 间 都 建立 有 链接 ,这 样 浏览 比较 方便 ,随时 可 以 到 
达 自 己 喜欢 的 页 面 。 但 是 由 于 链接 太 多 ,容易 使 浏览 者 迷路 , 搞 不 清 自己 在 什么 位 
置 ,看 了 多 少 内 容 。 
因此 ,在 实际 的 网 站 设计 中 ,总 是 将 这 两 种 结构 混合 起 来 使 用 。 总 的 目标 是 希望 浏览 者 
既 可 以 方便 快速 地 找到 自己 需要 的 页 面 ,又 可 以 清楚 地 知道 自己 的 位 置 。 关 于 链接 结构 的 
设计 ,在 实际 的 网 页 制作 中 是 非常 重要 的 一 环 ,采用 什么 样 的 链接 结构 直接 影响 到 版 面 的 
布局 。 


8.4.3 版 面 布局 


网 站 设计 有 点 像 传统 的 报刊 杂志 一 样 , 要 对 整个 版 面 进行 设计 ,也 就 是 布局 。 可 是 不 能 
把 网 页 看 作 报 纸 或 者 杂志 来 进行 排版 布局 ,因为 印刷 和 网 络 是 不 一 样 的 。 传 统 的 布局 排版 
并 不 适 于 网 络 ,因为 传统 的 印刷 布局 ,几乎 想 要 什么 样 的 平面 效果 都 能 很 好 地 达到 ,但 在 网 
络 上 设计 就 很 困难 ,尽管 很 多 的 效果 都 能 通过 一 些 JavaScript 或 是 高 级 的 CSS 技巧 来 实 
现 ,但 结果 是 使 源 代码 很 腑 肿 ,网 页 载 人 很 慢 。 

网 站 版 面 指 的 是 使 用 浏览 器 看 到 的 一 个 完整 的 页 面 (可 以 包含 框架 和 层 ) 。 因 为 显示 器 
分 辩 率 不 同 , 所 以 同一 个 页 面 的 大 小 可 能 出 现 640X480 像素 .800X600 像素 .1024X768 像 
素 等 不 同情 况 。 布 局 就 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 排放 在 页 面 的 不 同位 置 。 设 计 
版 面 时 要 把 文字 ,图片 .空白 当 作 一 个 整体 来 看 ,采用 平面 分 割 方式 ,调动 全 部 面积 来 构建 整 
个 版 面 。 常 见 的 页 面 布局 形式 有 以 下 几 种 。 

1.“T” 型 布局 

所 谓 “T” 型 布局 ,就 是 指 页 面 项 部 为 横 条 (网 站 标志 十 广告 条 ) ,下方 左 半 部 分 为 主 菜 
单 , 右 半 部 分 显示 内 容 的 布局 。 因 为 看 上 去 像 英 文字 母 “T”, 因 而 称 为 “TT” 型 布局 。 这 是 网 
页 设计 中 使 用 最 广泛 的 一 种 布局 方式 。 这 种 布局 的 优点 是 页 面 结构 清晰 , 主 次 分 明 ,强调 秩 
序 ,能 给 人 以 稳重 、 可 信赖 的 感觉 ,是 初学 者 最 容易 上 手 的 布局 方法 。 缺 点 是 果 板 ,如 果 细 节 
和 色彩 搭配 上 不 注意 ,很 容易 让 人 “看 之 无 味 ”。 

2.“ 口 "字形 布局 

这 是 一 个 形象 的 说 法 ,就 是 页 面 的 上 下 各 有 一 个 广告 条 , 左 侧 是 主 菜 单 , 右 侧 放置 友情 
链接 等 内 容 ,中 间 是 主要 内 容 。 这 种 布局 的 优点 是 充分 利用 版 面 .信息 量 大 ,国内 许多 门户 
网 站 如 网 易 .搜狐 等 采用 的 就 是 这 种 布局 。 缺 点 就 是 页 面 拥挤 不够 灵活 。 

3. POP 布局 

POP 引 自 广告 术语 ,就 是 指 页 面 布局 像 一 张 宣传 海报 .以 一 张 精 美 图 片 作为 页 面 的 设 
计 中 心 ,在 适当 位 置 放置 主 菜单 。 这 种 布局 方式 不 讲究 上 下 左右 对 称 , 但 要 平衡 和 有 韵律 ， 
能 达到 强调 ,动感 ,高 注目 性 的 效果 ,常用 于 时 尚 类 网 站 。 其 优点 是 漂亮 \, 吸 引 人 , 缺 点 就 是 
速度 慢 。 
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4. 对 比 性 布局 

所 谓 对 比 , 不 仅 是 利用 色彩 、 色 调 等 技巧 来 表现 ,在 内 容 上 也 可 涉及 古 与 今 . 新 与 日 、 贫 
与 富 等 的 对 比 。 优 点 是 视觉 冲击 力 强 .缺点 是 将 两 部 分 有 机 的 结合 比较 困难 。 一 般 用 于 设 
计 型 网 站 。 


8.5 网 站 策划 书 撰写 要 点 


一 个 网 站 成 功 与 否 与 建站 前 的 网 站 规划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 应 明确 建 
设 网 站 的 目的 ,确定 网 站 的 功能 ,确定 网 站 规模 、 投 入 费用 ,进行 必要 的 市 场 分 析 等 。 只 有 详 
细 的 规划 ,才能 避免 在 网 站 建设 中 出 现 很 多 问题 ,使 网 站 建设 能 顺利 进行 。 

经 过 充分 调研 ,确定 了 网 站 建设 目标 和 任务 后 ,就 可 以 动手 撰写 网 站 策划 书 了 。 此 时 ， 
应 该 从 访问 者 的 角度 来 考虑 问题 ,而 不 是 从 开发 者 的 角度 ,因为 决定 网 站 是 否 成 功 的 是 访问 
者 。 网 站 策划 书 应 该 尽 可 能 地 涵盖 网 站 规划 中 的 各 个 方面 ,写作 要 科学 .认真 实事求是 。 
根据 不 同 的 需要 和 侧重 点 ,网 站 的 功能 和 内 容 会 有 一 定 差别 ,但 网 站 规划 的 基本 步骤 是 类 似 
的 ,一 般 来 说 ,一 份 完整 的 网 站 规划 书 应 该 包括 下 列 内 容 。 


8.5.1 建立 网 站 的 目的 和 功能 定位 


这 是 网 站 规划 中 的 核心 问题 ,需要 非常 明确 和 具体 。 建 立 网 站 的 目的 也 就 是 一 个 网 站 
的 目标 定位 问题 ,网 站 的 功能 和 内 容 , 以 及 各 种 网 站 推广 策略 都 是 为 了 实现 网 站 的 预期 目 
的 。 建 立 网 站 可 以 有 多 种 目的 ,例如 ,从 事 直 接 网 上 销售 、 作 为 产品 信息 发 布 工具 、 信 息 中 介 
服务 .教育 和 培训 等 ,不 同类 型 的 网 站 其 表达 方式 和 实现 手段 是 不 一 样 的 。 

(1) 明确 建站 的 目的 ,主要 包括 形象 宣传 ,业务 经 营 和 电子 商务 ` 企 业 自身 需要 的 业务 
延伸 等 。 

(2) 根据 建站 目的 和 定位 ,确定 网 站 的 一 般 功 能 ,并 根据 实际 需求 ,确定 网 站 类 型 : 包 
括 企 业 型 网 站 、 应 用 型 网 站 、 商 业 型 网 站 (行业 型 网 站 ) .电子 商务 型 网 站 ;企业 网 站 又 分 为 企 
业 形 象 型 产品 宣传 型 .网 上 营销 型 客户 服务 型 .电子 商务 型 等 。 

(3) 分 析 企业 内 部 网 的 建设 情况 ,开发 时 考虑 网 站 的 可 扩展 性 。 为 网 站 设计 好 内 部 人 
口 和 外 部 入 口 ,用 于 优化 网 络 速度 。 


8.5.2 网 站 的 需求 分 析 和 规划 


在 进行 网 站 建设 前 ,要 先进 行规 划 与 分 析 ,确定 网 站 所 属 的 行业 、 阶 段 性 用 户 数量 ,面向 
客户 群体 .所 要 实现 的 功能 。 这 些 问题 影响 着 网 站 建设 各 个 后 续 阶段 的 进行 ,决定 着 设备 及 
运行 环境 技术 手段 .实现 方法 和 推广 方式 等 一 系列 关键 问题 的 制定 ,最 终 决定 了 整个 项 目 
的 成 败 。 

CD. 调查 相关 行业 的 市 场 行情 ,结合 本 企业 的 相关 特点 进行 分 析 , 研 究 该 企业 在 
Internet. 上 开展 业务 的 可 行 性 。 因 为 它们 之 间 有 所 联系 ,要 根据 市 场 分 析 得 来 的 情况 对 网 站 
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进行 定位 和 目标 调整 。 与 此 同时 ,还 要 进行 网 站 服务 对 象 分 析 。 

(2) 所 谓 知己 知 彼 , 百 战 不 列 。 了 解 同行 的 网 站 情况 特点 ,为 网 站 的 制作 方向 准确 定 
位 ,使 自己 的 产品 更 有 竞争 力 。 

(3) 分 析 公 司 自 身 条 件 、 公 司 概况 、 市 场 优势 .利用 网 站 可 以 提升 哪些 竞争 力 ,估算 建设 
网 站 的 能 力 (费用 、 技 术 . 人 力 等 ) ,并 做 好 公司 的 可 投入 资源 分 析 和 最 终 的 利润 回报 分 析 。 

例如 ,对 于 一 个 提供 视频 娱乐 服务 的 网 站 ,要 求 服务 器 有 更 大 的 内 存 空间 和 存储 空间 、 
更 高 的 网 络 出 口 带宽 和 更 多 的 投资 预算 ,而 视频 节目 的 格式 决定 了 操作 系统 的 选择 和 播放 
网 页 的 设计 技术 ,客户 数量 的 增加 要 求 更 高 的 服务 器 及 网 络 性 能 和 更 先进 的 技术 手段 ,造成 
了 更 大 的 资金 需求 。 如 果 盲 目 决策 ,或 者 脱离 实际 ,没有 针对 性 地 进行 网 站 建设 , 必 将 导致 
失败 。 


8.5.3 域名 和 网 站 名 称 的 选择 


一 个 好 的 域名 对 网 络 营销 的 成 功 具 有 重要 意义 ,网 站 名 称 同 域名 一 样 具 有 重要 意义 , 域 
名 和 网 站 名 称 应 该 在 网 站 规划 阶段 就 作为 重要 内 容 来 考虑 。 有 些 网 站 发 布 一 段 时 间 之 后 才 
发 现 域名 或 者 网 站 名 称 不 太 合适 ,需要 重新 更 改 , 不 仅 非常 麻烦 ,而 且 前 期 的 推广 工作 几乎 
没有 任何 价值 ,同时 对 自己 网 站 形象 也 造成 一 定 的 伤害 。 

在 申请 域名 的 过 程 中 ,应 该 注意 以 下 几 点 : 

CD 行动 要 快 ,以 免 被 别人 抢 注 。 一 旦 确定 了 自己 的 域名 后 ,一定 要 尽快 向 有 关机 构 申 
请 注册 ,因为 在 全 世界 范围 内 有 可 能 其 他 企业 也 打算 申请 同样 的 域名 。 

(2) 选择 自己 企业 的 名 称 、 标 志 、 品 牌 ,商标 名 作为 域名 。 企 业经 过 长 期 的 经 营 和 宣传 ， 
自身 的 商业 标识 具有 很 高 的 价值 和 影响 力 , 利 用 这 些 标 识 为 域名 ,一 方面 ,保护 了 自己 在 传 
统领 域 的 经 营 成 果 ; 另 一 方面 ,也 有 利于 网 站 的 宣传 和 推广 。 

(3) 注意 挑选 域名 的 艺术 。 尽 量 使 用 易于 输入 、 易 于 记忆 、 有 人 文 背景 有 重大 意义 的 
词汇 。 选 择 域名 也 要 符合 人 们 的 使 用 习惯 ,不 要 使 用 太 长 的 ,容易 误解 的 或 容易 拼写 错误 的 
名 称 作 为 域名 。 

(4) 可 以 申请 多 个 域名 。 对 于 大 型 企业 ,具有 商业 价值 的 标识 较 多 ,应 该 利用 这 些 标识 
多 注册 几 个 域名 ,以免 被 别人 抢 注 而 造成 商业 利益 损失 。 


8.5.4 网 站 的 主要 功能 

在 确定 了 网 站 目标 和 名 称 之 后 ,就 要 设计 网 站 的 功能 .网 站 功能 是 战术 性 的 ,是 为 了 实 
现 网 站 的 目标 。 网 站 的 功能 是 为 用 户 提供 服务 的 基本 表现 形式 。 一 般 来 说 ,一 个 网 站 有 几 
个 主要 的 功能 模块 ,这 些 模块 体现 了 一 个 网 站 的 核心 价值 。 
8.5.5 网 站 技术 解决 方案 


在 这 个 环节 要 考虑 网 站 的 建立 .设备 的 选择 及 技术 ,还 有 网 站 的 安全 与 维护 方面 的 
问题 。 
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1. 建立 网 站 

通过 估算 网 站 的 访问 量 ,确定 网 站 的 发 布 方式 ,是 自 购 服务 器 ,服务 器 托管 ,还 是 租用 虚 
拟 主机 。 若 流量 较 小 ,就 应 选 租用 虚拟 主机 ; 若 流量 和 数据 量 大 ,就 应 选 自 购 服 务 器 ,但 维护 
量 也 大 。 

在 Internet 上 建立 网 站 目前 通常 选用 虚拟 主机 或 服务 器 托管 ,可 以 根据 具体 情况 选择 
其 中 一 种 。 

(1) 虚拟 主机 

虚拟 主机 就 是 通过 租用 ISP(Internet Service Provider) 服务 商 的 硬盘 空间 来 建立 自己 
的 Web 站 点 , 它 共 享 了 服务 商 的 Web 服务 器 和 网 络 资源 。 这 种 方式 成 本 低廉 ,但 是 ISP 的 
一 台 服 务 器 往往 会 虚拟 出 很 多 个 主机 名 称 ,会 影响 访问 速度 。 另 外 ,虚拟 主机 情况 下 ,网 页 
的 设计 和 功能 受制 于 托管 服务 器 的 软件 环境 。 以 发 布 静态 内 容 为 主 的 中 小 企业 和 个 人 采用 
这 种 方式 居多 ,使 用 到 数据 库 等 技术 的 商业 网 站 则 不 适合 这 种 方式 。 

(2) 服务 器 托管 

企业 自行 购买 .配置 .安装 Web 服务 器 后 ,托管 在 数据 通信 部 门 ISP 等 服务 提供 商 处 ， 
共享 服务 商 的 网 络 资源 。 企 业 需要 根据 所 获得 的 网 络 出 口 带宽 支付 相对 便宜 的 托管 费 。 这 
种 方式 下 ,企业 自行 设计 网 站 系统 ,通过 远程 维护 的 方式 管理 自己 的 Web 系统 。 它 的 最 大 
好 处 利用 了 接 人 服务 商 的 宽带 网 络 出 口 ,节省 了 自己 租用 宽带 线路 的 昂贵 费用 ,并 拥有 网 站 
的 支配 权 , 因 而 这 种 方式 比较 普遍 。 

2. 设备 选择 

这 一 阶段 主要 是 选择 Web 及 数据 库 服 务 器 主机 、 网 络 接 入 设备 等 。 服 务 器 主机 接 入 
Internet 的 方式 确定 后 ,就 可 以 根据 需求 分 析 的 要 求购 买 、 配 置 服务 器 。 服 务 器 有 不 同 厂商 
和 不 同型 号 之 别 , 有 PC 级 服务 器 ,也 有 企业 级 的 服务 器 ,还 有 更 高 级 的 小 型 机 ,主要 根据 业 
务 需求 .投资 额度 、 规 划 中 的 数据 传输 量 和 访问 人 数 来 加 以 确定 。 

在 虚拟 主机 方式 下 ,企业 不 需要 购买 服务 器 和 网 络 设备 。 在 服务 器 托管 方式 下 ,企业 只 
需要 购买 服务 器 ,不 需要 购买 网 络 设 备 。 为 了 降低 投资 ,企业 一 般 尽 量 租用 最 少 的 托管 机 
位 ,往往 将 Web 服务 器 ,数据库 服务 器 甚至 邮件 服务 器 都 一 并 安装 在 一 个 主机 上 。 在 租用 
DDN 专线 方式 下 ,企业 的 设备 投资 较 大 ,不 仅 要 购买 服务 器 主机 ,而 且 要 购买 路 由 器 .数字 
滤波 器 等 网 络 接 人 设备 ,还 要 购买 合适 的 网 络 安全 产品 。 这 种 方式 下 ,企业 开展 的 电子 商务 
活动 规模 较 大 ,需要 多 台 服 务 器 主机 来 完成 ,需要 解决 企业 内 部 网 与 外 联网 的 连接 问题 , 因 
此 ,需要 购买 一 定 的 组 网 设备 。 

3. 技术 选择 

(1) 网 络 操作 系统 : 可 以 选用 UNIX、Linux、Windows 2003/ Windows 2002 等 ,分 析 投 
入 成 本 、 功 能、 开发 难度 、 稳 定性 和 安全 性 等 。 

(2) 企业 解决 方案 : 可 以 选用 IBM, HP 等 公司 提供 的 企业 上 网 方案 .电子 商务 解决 方 
案 , 也 可 以 自行 开发 系统 。 

СЗ) 程序 开发 语言 : 网 页 设计 语言 可 以 选用 ASP. NET, ASP,JSP.CGI 等 。 除 了 网 页 
程序 还 要 考虑 数据 库 程 序 , 若 考虑 价格 ,可 考虑 使 用 免费 的 数据 库 MySQL, 中 型 的 项 目 可 
以 考虑 MSSQL., 


185 


第 8 章 ”网 站 规划 设计 


4. 网 站 的 安全 与 维护 

网 站 安全 性 措施 的 技术 选择 包括 防 人 侵 、 病 毒 、 汇 密 等 。 如 果 使 用 的 是 自 购 服 务 器 ,要 
再 考虑 机 房 的 消防 安全 。 同 时 要 做 好 网 站 的 长 期 维护 升级 的 计划 ,做 软件 不 可 能 一 下 就 做 
得 很 好 ,有 一 个 不 断 升 级 的 过 程 。 


8.5.6 网 站 内 容 规划 


不 同类 别 的 网 站 ,在 内 容 方面 的 差别 很 大 ,因此 ,网 站 内 容 规 划 没有 固定 的 格式 , 需 根 据 
不 同 的 网 站 类 型 来 制订 。 

(1) 根据 网 站 的 目的 确定 网 站 的 结构 导航 。 

一 般 企业 型 网 站 应 包括 : 公司 简介 、 企 业 动态 .产品 介绍 、 客 户 服务 、 联 系 方式 .网 上 订 
单 \ 在 线 留 言 等 基本 内 容 。 更 多 内 容 如 : 常见 问题 ,营销 网 络 、 招 贤 纳 士 \ 在 线 论坛 .英文 
版 等 。 

(2) 根据 网 站 的 目的 及 内 容 确定 网 站 整合 功能 。 

如 Flash 引导 页 ,会 员 系 统 、 网 上 购物 系统 、 在 线 支付 .问卷 调查 系统 、 在 线 支付 .信息 搜 
索 查 询 系 统 、 流 量 统 计 系统 等 。 

(3) 电子 商务 类 网 站 要 提供 会 员 注册 、 详 细 的 商品 服务 信息 、 信 息 搜索 查询 ,订单 确认 、 
支付 方法 ,个 人 信息 保密 措施 \ 在 线 帮助 等 信息 。 

(4) 如 果 网 站 栏目 比较 多 ,应 该 请 专人 负责 网 站 的 新 闻 内 容 。 比 如 综合 门户 类 网 站 则 
将 不 同 的 内 容 划 分 为 许多 独立 的 或 有 关联 的 频道 ,有 时 一 个 频道 的 内 容 就 相当 于 一 个 独立 
网 站 的 功能 。 注 意 : 网 站 内 容 是 网 站 吸引 浏览 者 最 主要 的 因素 ,无 内 容 或 不 实用 的 信息 不 
会 吸引 匆匆 浏览 的 访客 。 在 网 站 发 布 后 调查 人 们 对 网 站 内 容 的 满意 度 , 了 解 客户 对 网 站 内 
容 的 需求 ,以 及 时 调整 网 站 内 容 并 更 新 信息 。 


8.5.7 网 站 测试 


在 网 站 设计 完成 之 后 ,应 该 进行 一 系列 的 测试 , 当 一 切 测试 正常 之 后 ,才能 正式 发 布 。 
测试 过 程 可 以 大 致 分 为 功能 测试 和 集成 测试 两 个 阶段 。 功 能 测试 就 是 测试 网 页 的 功能 和 包 
含 的 超 链接 是 否 正确 ;集成 测试 是 在 完成 功能 测试 后 将 网 站 各 个 模块 组 装 起 来 ,进行 综合 测 
试 。 网 站 的 测试 内 容 主要 包括 系统 性 能 和 安全 性 方面 的 测试 ,程序 的 功能 测试 ,网 页 兼容 人 性 
和 实用 性 测试 以 及 其 他 测试 需要 的 测试 等 ,具体 介绍 如 下 : 

1. 超 链接 测试 

网 页 间 的 转移 是 通过 超 链接 进行 的 ,因此 ,要 保证 网 站 上 每 一 个 链接 都 能 指向 正确 有 效 
的 位 置 。 网 站 从 开发 服务 器 发 布 到 正式 站 点 后 ,由 于 环境 的 变化 ,经 常 出 现 超 链接 定义 错 
误 , 在 测试 中 需要 重点 关注 。 

2. 响应 时 间 测 试 

响应 时 间 指 从 用 户 发 出 对 网 页 的 请 求 , 到 该 网 页 所 包含 的 程序 都 执行 完毕 、 所 包含 的 超 
媒体 元 素 都 下 载 完毕 的 这 段 时 间 。 在 同样 的 网 络 条 件 下 ,响应 时 间 偏 长 的 网 页 是 不 利于 电 
子 商 务 活动 的 ,这 往往 是 由 于 网 页 在 平面 设计 过 程 中 包含 了 大 量 的 图 像 信息 ,或 者 脚本 程序 
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设计 不 合理 。 测 试 过 程 需要 尽量 找 出 这 类 网 页 ,一 般 是 对 关键 部 分 的 网 页 进行 响应 时 间 
测试 。 

3. 网 页 兼容 性 测试 

网 页 的 兼容 性 也 就 是 对 用 户 使 用 环境 的 兼容 性 ,包括 浏览 器 的 兼容 性 和 显示 模式 的 兼 
容 性 。 浏 览 器 的 兼容 性 指 对 IE, Firefox, Netscape 等 主流 浏览 器 以 及 同一 浏览 器 的 多 个 常 
用 版 本 的 兼容 性 ,显示 模式 的 兼容 性 指 对 显示 设备 工作 的 分 辩 率 等 不 同 模式 的 兼容 性 。 测 
试 中 需要 针对 上 述 各 种 情况 模拟 用 户 的 使 用 环境 ,检查 网 页 运行 后 是 否 存在 运行 错误 或 者 
效果 失常 等 问题 。 

4. 多 用 户 并 发 测试 

对 于 存在 业务 集中 受理 情况 .实时 性 要 求 高 的 网 站 需要 模拟 多 用 户 同 时 在 线 的 情况 测 
试 网 站 运行 性 能 的 负载 能 力 ,看 看 能 否 正常 运作 。 

测试 通过 的 系统 还 要 经 过 一 定时 期 的 试 运行 ,期 间 可 能 会 新 发 现 一 些 潜在 的 错误 ,或 者 
需要 改进 的 环节 ,经 过 不 断 完善 后 才能 正式 进入 商业 运行 。 


8.5.8 网 站 发 布 


网 站 发 布 的 实际 工作 中 需要 注意 几 方 面 的 问题 : 首先 ,要 保证 网 站 的 运行 环境 一 致 \ 正 
确 , 特 别 是 要 正确 设置 Web 服务 器 的 属性 及 控制 .性 能 .权限 等 参数 。 其 次 ,要 保证 发 布 后 
每 个 超 链接 都 要 指向 正确 的 文档 位 置 。 网 站 中 超 链 接 的 数目 往往 是 很 多 的 ,开发 阶段 容易 
使 用 绝对 路 径 而 没有 察觉 ,网 页 工具 使 用 过 程 中 有 会 改变 链接 路 径 的 表示 方式 ,这 就 经 常 造 
成 发 布 后 的 网 站 出 现 链接 错误 ,影响 了 网 站 的 运行 。 另 外 ,在 很 多 人 协同 开发 网 站 时 ,特别 
要 注意 版 本 控制 的 问题 。 

从 开发 位 置 向 远程 站 点 发 布 网 页 一 般 是 使 用 FTP 协议 进行 文件 传输 的 ,上 传 网 页 和 网 
站 所 需 的 文件 ,也 可 以 下 载 网 页 以 供 修改 。FrontPage、Dreamweaver 等 流行 网 页 设计 工具 
都 提供 网 页 发 布 功能 ,配置 好 FTP 服务 器 访问 参数 ,就 可 以 操作 文件 的 上 传 和 下 载 。 


8.5.9 网 站 推广 


网 站 推广 活动 一 般 发 生 在 网 站 正式 发 布 之 后 ,当然 也 不 排除 一 些 网 站 在 筹备 期 间 就 开 
始 宣传 的 可 能 。 网 站 推广 是 网 络 营销 的 主要 内 容 , 可 以 说 ,大 部 分 的 网 络 营销 活动 都 是 为 了 
网 站 推广 的 需要 ,例如 ,发 布 新 闻 、 搜 索引 擎 登记 、 交 换 链接 、 网 络 广告 等 。 因 此 ,在 网 站 规划 
阶段 就 应 该 对 将 来 的 推广 活动 有 明确 的 认识 和 计划 ,而 不 是 等 网 站 建成 之 后 才 考 虑 采取 什 
么 样 的 推广 手段 。 由 此 也 可 以 看 出 ,网 站 规划 并 不 仅仅 是 为 了 网 站 建设 的 需要 ,而 是 整个 网 
络 营 销 活 动 的 需要 。 


8.5.10 网 站 维护 


网 站 正式 开通 运行 后 ,就 处 于 一 种 全 天 候 、 跨 地 域 的 工作 状态 下 , 供 分 布 于 世界 各 地 的 
客户 使 用 。 因 此 ,网 站 的 运行 状态 至 关 重 要 。 可 以 说 ,网 站 建成 之 日 就 是 网 站 维护 开始 之 
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时 。 网 站 维护 应 注意 以 下 几 点 : 

(1) 服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 , 保 证 系 
统 的 运行 畅 顺 。 

(2) 数据 库 维护 ,有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 。 

СЗ) 制定 内 容 的 更 新 、 调 整 计划 。 

(4) 制定 相关 网 站 维护 的 规定 ,使 网 站 维护 制度 化 ,规范 化 。 

(5) 特别 注意 网 站 的 维护 时 间 , 尽 量 在 深夜 等 用 户 最 少 的 时 候 进 行 维护 , 尽 可 能 降低 因 
维护 而 对 用 户 的 资料 造成 损失 。 

根据 上 述 可 知 , 网 站 的 维护 一 定 要 设置 专职 的 管理 及 维护 人 员 , 并 制定 严格 的 管理 制 
度 ,明确 日 常 的 管理 及 维护 工作 ,并 要 求 有 完整 的 维护 工作 记录 。 网 站 维护 工作 主要 包括 以 
下 内 容 。 

1. 例 行 的 状态 监视 

每 天 定期 检查 网 站 的 运行 状况 ,看 看 有 无 链接 错误 .运行 缓慢 ,甚至 程序 执行 错误 等 异 
常情 况 。 及 时 收集 电子 信箱 E т BBS 论坛 等 栏目 的 反馈 信息 ,了 解 客户 在 使 用 过 程 中 
遇 到 了 什么 困难 。 对 于 发 现 的 问题 要 予以 解决 或 及 时 报告 技术 部 门 。 

2. 日 常 的 技术 管理 

监视 服务 器 、 网 络 设备 的 工作 情况 ,检查 服务 器 及 相关 软 硬 件 工作 是 否 正 常 ;网 站 技术 
维护 要 制度 化 ,规范 化 ,网 站 内 容 的 更 新 、 调 整 事先 要 有 规划 ;网 络 管理 软件 \ 安 全 管理 软件 
的 配置 和 工作 参数 要 整理 存档 。 

3. 对 网 站 安全 性 进行 监督 

经 常 检查 服务 器 的 工作 日 志 , 发 现 是 否 有 非法 入 侵 或 者 遭受 黑客 攻击 ,及 时 安装 操作 系 
统 的 各 种 补丁 软件 和 升级 系统 软件 ,消除 系统 存在 的 漏洞 和 安全 隐患 。 

4. 数据 及 系统 备份 

网 站 应 该 为 用 户 提供 持续 、 稳 定 的 服务 ,不 能 因为 服务 器 出 现 故 障 而 终止 一 段 时 间 的 服 
务 ,否则 将 损害 网 站 的 形象 。 同 时 ,网 站 每 人 发 布 的 商业 信息 、 交 易 过 程 中 产生 的 数据 都 极 
为 重要 ,应 该 加 以 保护 。 因 此 ,需要 定期 对 网 站 上 的 数据 、 网 页 ,程序 和 应 用 软件 进行 备份 。 
数据 的 备份 主要 是 对 数据 库 里 的 数据 进行 备份 ,可 以 使 用 Backup、Output 等 方法 将 数据 导 
出 ,一 旦 服务 器 发 生 灾 难 ,就 用 还 原 、 导 入 、 附 加 数据 库 等 方法 恢复 数据 。 为 了 在 遭遇 系统 崩 
溃 时 以 最 短 的 时 间 迅 速 恢复 网 站 正常 运行 ,可 以 采用 双 机 备份 技术 ,保证 两 台 服 务 器 里 的 网 
页 \ 程 序 ` 数 据 \ 环 境 设置 等 完全 一 致 ,当主 服务 器 瘫痪 时 ,马上 启用 备份 服务 器 。 


8.5.11 网 站 财务 预算 


除了 上 述 各 种 技术 解决 方案 、 内 容 、 功 能 推广、 测试 等 内 容 应 该 在 网 站 规划 书 中 详细 说 
明之 外 ,网 站 建设 和 推广 的 财务 预算 也 是 重要 内 容 , 网 站 建设 和 推广 在 很 大 程度 上 受到 财务 
预算 的 制约 ,所 有 的 规划 都 只 能 在 财务 许可 的 范围 之 内 。 财 务 预算 应 按照 网 站 的 开发 周期 ， 
包含 网 站 所 有 的 费用 明细 清单 。 

以 上 为 网 站 策划 书 中 应 该 体现 的 主要 内 容 , 网 站 开发 者 可 根据 不 同 的 建站 需求 调整 策 
划 书 中 的 内 容 。 
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习题 8 


8-1 
8-2 
8-3 
8-4 


举例 说 明 有 哪些 常见 的 网 站 类 型 。 

网 站 内 容 设计 应 遵守 哪些 原则 ? 

网 站 界面 规划 时 应 该 考虑 哪些 问题 ? 

请 分 析 编 写 网 站 规划 书 应 包括 哪些 内 容 ? 


第 9 章 网 站 的 设计 


本 章 知识 点 

。 定位 网 站 的 CI 形象 

。 网 站 的 整体 风格 和 创意 设计 
。 网 站 功能 设计 

。 网 站 结构 设计 

。 网 站 设计 流程 

本 章 学 习 目标 

。 分 析 定 位 网 站 的 CI 形象 

。 掌握 网 站 的 整体 风格 和 创意 设计 的 方法 
。 理解 网 站 功能 设计 

。 理解 网 站 结构 设计 

。 掌握 网 站 设计 流程 


9.1 定位 网 站 的 CI 形象 


所 谓 CI, 是 借用 的 广告 术语 。CI 是 英文 Corporate Identity 的 缩写 ,意思 是 通过 视觉 来 
统一 企业 的 形象 。 现 实生 活 中 的 CI 策划 比比 和 皆 是 ,杰出 的 例子 如 可 口 可 乐 公司 ,全 球 统一 
的 标志 、 色 彩 和 产品 包装 ,给 我 们 的 印象 极为 深刻 。 更 多 的 例子 如 SONY ,三菱 ,麦当劳 等 。 

一 个 杰出 的 网 站 ,和 实体 公司 一 样 , 也 需要 整体 的 形象 包装 和 设计 。 准 确 的 ,有 创意 的 
CI 设计 ,对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 在 您 的 网 站 主题 和 名 称 定 下 来 之 后 ,需要 
思考 的 就 是 网 站 的 CI 形象 。 

网 站 给 人 的 第 一 印象 来 自视 觉 冲 击 ,确定 网 站 的 标准 色彩 是 相当 重要 的 一 步 。 不 同 的 
色彩 搭配 产生 不 同 的 效果 ,并 可 能 影响 到 访问 者 的 情绪 。 

“标准 色彩 ?是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 举 个 实际 的 例子 就 明白 了 : IBM 
的 深蓝 色 ,肯德基 的 红色 条 型 , Windows 视窗 标志 上 的 红 蓝 黄 绿色 块 ,都 使 我 们 觉得 很 巾 
切 ,很 和 谐 。 如 果 将 IBM 改 用 绿色 或 金黄 色 .我 们 会 有 什么 感觉 ? 

一 般 来 说 ,一 个 网 站 的 标准 色彩 不 超过 З 种 , 太 多 则 让 人 眼花 绑 乱 。 标 准 色彩 要 用 于 网 
站 的 标志 、 标 题 . 主 菜单 和 主 色 块 。 给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 使 用 ,只 
是 作为 点 级 和 衬托 , 绝 不 能 喧 宾 夺 主 。 

一 般 来 说 ,适合 于 网 页 标准 色 的 颜色 有 : 蓝 色 、 黄 /橙色 、 黑 / 灰 / 白 色 三 大 系列 色 。 
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和 标准 色彩 一 样 ,标准 字体 是 指 用 于 标志 、 标 题 . 主 菜单 的 特有 字体 。 一 般 网 页 默认 的 
字体 是 宋体 。 为 了 体现 站 点 的 “与 众 不 同 ” 和 特有 风格 ,可 以 根据 需要 选择 一 些 特别 字体 。 
例如 ,为 了 体现 专业 可 以 使 用 粗 仿 宋体 ,体现 设计 精美 可 以 用 广告 体 ,体现 亲切 随意 可 以 用 
手写 体 等 。 当 然 这 些 都 是 笔者 的 个 人 看 法 ,你 可 以 根据 自己 网 站 所 表达 的 内 涵 , 选 择 更 贴切 
的 字体 。 目 前 常见 的 中 文字 体 有 二 三 十 种 ,常见 的 英文 字体 有 近 百 种 ,网 络 上 还 有 许多 专用 
英文 艺术 字体 下 载 , 要 寻找 一 款 满意 的 字体 并 不 算 困 难 。 

CI 形象 可 以 说 是 网 站 的 精神 、 网 站 的 目标 ,用 一 句 话 甚至 一 个 词 来 高 度 概括 ,类 似 实际 
生活 中 的 广告 金 句 。 例 如 : 静 巢 的 “味道 好 极 了 ”; 麦 斯 威 尔 的 “好 东西 和 好 朋友 一 起 分 享 ”; 
Intel 的 “给 你 一 个 奔腾 的 心 ”。 

综 上 所 述 ,标志 、 色 彩 、 字 体 、 标 语 , 蚌 一 个 网 站 树立 CI 形象 的 关键 ,确切 的 说 是 网 站 的 
表面 文章 ,设计 并 完成 这 几 步 ,你 的 网 站 将 脱胎 换 骨 ,整体 形象 有 一 个 提升 。( 注 意 : 我 们 只 
是 以 平面 静态 来 设计 CI, 还 没有 引入 声音 、 三 维 立 体 等 因素 。) 


9.1.1 设计 网 站 的 标志 


首先 你 需要 设计 制作 一 个 网 站 的 标志 (Logo)。 就 如 同 商标 一 样 ,Logo 是 你 站 点 特色 
和 内 涵 的 集中 体现 ,看 见 Logo 就 让 大 家 联想 起 你 的 站 点 。 注 意 : 这 里 的 Logo 不 是 指 88X 
31 的 小 图 标 Banner , 而 是 网 站 的 标志 。 

标志 可 以 是 中 文英 文字 母 , 可 以 是 符号 .图 案 , 可 以 是 动物 或 者 人 物 等 。 比 如 : soim 
是 用 soim 的 英文 作为 标志 ,新 浪 用 字母 “sina” 十 “眼睛 ”作为 标志 。 标 志 的 设计 创意 来 自 你 
网 站 的 名 称 和 内 容 。 

1. Logo 定义 

Logo 是 表明 特征 的 符号 ,主要 由 企业 品牌 的 标准 名 称 、 标 准 图 形 ( 字 体 图 形 和 形象 图 
形 )、 标 准 色彩 ,按照 标准 规范 组 合 构成 。 

企业 识别 标志 从 语义 指向 .印象 感染 ` 色 彩 冲击 .协同 方式 4 个 方面 ,表现 和 展示 企业 生 
产 经 营 独特 的 发 展 战略 和 行为 方式 ,开发 和 创造 独特 的 产品 品牌 ,塑造 和 传播 良好 形象 。 

2. Logo 的 职能 

作为 独特 的 传媒 符号 ,Logo 一 直 是 传播 特殊 信心 的 视觉 文化 语言 。 现 代 意 念 的 抽象 纹 
FE .简单 字 表 等 都 是 在 实现 表示 被 标识 体 的 目的 , 即 通过 对 标识 的 识别 .区 别 . 引 发 联想 、 增 
强 记 忆 , 促 进 被 表示 体 与 其 对 象 的 沟通 与 交流 ,从 而 树立 并 保持 对 被 标识 体 的 认 知 .认同 , 达 
到 提高 认 知 度 、 美 誉 度 的 效果 。 

具有 传媒 特性 的 Logo, 为 了 在 最 有 效 的 空间 内 实现 所 有 的 视觉 
pcs... 识别 功能 ,一 般 是 通过 特 示 图 及 文字 的 组 合 达到 对 被 标识 体 的 出 
Ж ЗР Ж EB Hi Pb — 示 \ 说 明 \ 沟 通 、 交 流 从 而 引导 观众 的 兴趣 ,达到 增强 美誉 .记忆 等 目 
М.У У 
的 ,如 图 9-1 所 示 。 
一 个 Logo 在 网 站 中 的 作用 主要 体现 在 以 下 几 个 方面 。 

(1) 树立 形象 : 一 个 网 站 的 Logo 可 以 说 就 是 这 个 网 站 的 形象 , 它 代 表 网 站 的 整体 风 
格 ,特别 是 对 于 企业 网 站 来 说 ,Logo 就 是 一 个 品牌 的 形象 ,所 以 Logo 对 树立 一 个 网 站 的 形 
象 起 着 至 关 重 要 的 作用 。 


图 9-1 
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(2) 传递 信息 : 一 个 网 站 的 信息 , 绝 大 多 数 都 需要 通过 Logo 来 传递 。 如 常见 的 网 站 链 

接 ,一 个 网 站 被 连接 到 另 一 个 网 站 ,此 时 这 个 网 站 的 信息 都 需要 通过 被 链接 的 Logo 来 达到 
让 访问 者 了 解 的 目的 。 

(3) 品牌 拓展 : 在 网 络 中 ,Logo 就 是 一 个 完整 的 形象 代表 ,一 切 主题 活动 都 要 围绕 这 个 
形象 来 进行 ,如 在 设计 制作 一 些 宣传 页 面 时 ,都 要 将 Logo 放置 到 显著 的 位 置 。 另 外 ,Logo 
也 是 网 络 广告 中 不 可 缺少 的 构成 要 素 。 

3. Logo 的 设计 原则 

Logo 的 设计 需要 从 很 多 方面 来 分 析 , 它 涉及 图 形 .文字 颜色 .排版 等 各 个 方面 的 内 容 。 

首先 是 Logo 的 构成 ,一 般 由 网 站 的 英文 名 称 、 网 站 的 网 址 、 网 站 的 标志 图 形 、 网 站 的 主 
题 描述 构成 。 对 于 中 文 网 站 的 Logo 来 说 , 它 还 会 包括 网 站 的 中 文 名 称 。 但 这 几 个 构成 要 
素 并 不 一 定 同时 存在 ,而 是 适当 的 组 合 在 一 起 ,如 图 9-1 所 示 。 

其 次 是 Logo 的 形体 都 会 有 一 些 真 实 形体 作 参 考 , 例 如 ,一 些 足球 网 站 可 能 在 网 站 的 
Logo 中 放置 一 个 足球 ,或 者 是 跟 名 字 有 关系 的 实体 ,如 狐狸 、 猫 爪子 等 。 

接着 是 颜色 ,网 站 Logo 的 颜色 选择 中 应 尽量 少 用 颜色 ,一 般 不 超过 З 种 ,一 方面 减少 
图 像 大 小 , 另 一 方面 避免 给 人 过 于 花哨 的 感觉 ,并且 尽 量 要 选 与 网 站 的 整体 相关 联 的 颜色 。 

然后 是 字体 ,网 站 Logo 设计 中 的 字体 相当 重要 ,很 多 要 传递 的 信息 都 是 通过 文字 来 表 
达 的 。 一 般 地 ,字体 和 Logo 图 像 都 得 保持 风格 的 一 致 性 ,因此 在 字体 大 小 写 的 选择 上 也 要 
遵循 以 下 原则 : 

(1) 选择 大 写 给 人 以 整齐 的 感觉 。 

(2) 选择 小 写 主 要 适用 其 起 伏 性 。 

(3) 大 小 写 混用 时 ,要 注意 整齐 性 。 

最 后 是 图 案 和 版 式 ,Logo 特 示 图 属于 表象 符号 ,独特 、 醒 目 ;图 本 身 易 被 区 分 、 记 忆 ; 通 
过 隐喻 ,联想 ,概括 、 抽 象 等 绘画 表现 方法 表现 被 标识 体 ,对 其 理念 的 表达 概括 而 形象 。 如 果 
能 设计 出 相应 的 吉祥 物 ,能 使 公司 形象 更 加 耳熟能详 .借以 强化 沟通 和 理解 。 

4. Logo 的 设计 技巧 

设计 Logo 应 该 遵循 访问 者 的 认识 规律 ,突出 主题 . 引 人 注 目 。 按 照 从 上 到 下 、 从 左 到 
右 、 从 小 到 大 、 从 远 到 近 的 视觉 习惯 以 及 思维 习惯 \ 审 美能 力 和 审美 心理 等 要 求 ,力争 使 
Logo 做 到 主题 突出 , 引 人 注 目 。 在 实际 的 设计 制作 中 ,一 般 通 过 以 下 几 个 方面 来 把 握 ， 

CD 在 版 式 设计 上 ,要 保持 视觉 平衡 .讲究 线条 的 流畅 ,使 得 整体 形状 美观 大 方 。 

(2) 通过 运用 反差 .对 比 或 边框 等 ,使 要 表达 的 主题 得 到 突出 。 

(3) 选择 恰当 的 字体 ,使 字体 在 符合 整体 风格 的 基础 上 具有 独特 性 。 

(4) 版 式 的 设计 要 注意 留 白 ,给 访问 者 提供 想象 空间 。 

合理 地 运用 色彩 。 因 为 访问 者 对 色彩 的 反应 比 对 形状 的 反映 更 为 敏锐 和 直接 ,更 
能 激发 情感 ,在 色彩 选择 方面 ,基色 要 相对 稳定 ,要 强调 色彩 的 记忆 感 和 感情 规律 , 合 
理 使 用 色彩 的 对 比 关 系 , 因 为 色彩 的 对 比 能 产生 强烈 的 视觉 效果 ,而 色彩 的 调和 则 构 
成 空间 层次 。 

5. Logo 的 实例 制作 

下 面 ,详细 介绍 “创意 100FUN” 的 详细 制作 步骤 ,主要 使 用 的 工具 是 Adobe 
Photoshop CS4 。 
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CD 选择 “文件 ”>“ 新 建 "命令 ,建立 一 副 400 20 像素 的 图 片 文件 ,如 图 9-2 所 示 。 


атор [кет 


颜色 模式 (Mj: |RGB 颜色 到 18 位 - 
пяла: [ве E Бахх 


v 高 级 


图 9-2 


(2) 选择 * 滤 镜 ” 一 杂 色 ”一 添加 杂 色 ”命令 ,参数 设置 及 应 用 效果 如 图 9-3 所 示 o 

(3) 选择 “图 像 ”~* 调 整 ”> 闽 值 命令 ,在 弹出 的 对 话 框 中 将 * 阔 值 色 阶 ” 设 置 为 229， 
如 图 9-4 所 示 。 

(4) 双击 背景 图 层 ,弹出 如 图 9-5 所 示 的 “新 建 图 层 ” 对 话 框 ,直接 单 击 “ 确 定 ” 按 钮 ,将 
背景 层 转 化 成 普通 图 层 一 一 图 层 0。 
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图 9-3 图 9-5 


(5) 选择 “图 像 ” 一 “图 像 大 小 ”命令 ,将 图 像 大 小 的 “宽度 ”和 “高 度 " 均 设 为 400, 如 
图 9-6 所 示 ,效果 如 图 9-7 所 示 o 

(6) 选择 “图 层 ”>“ 复 制图 层 ” 命 令 , 打 开 如 图 9-8 所 示 对 话 框 ,直接 单 击 “ 确 定 ” 按 钮 ， 
得 到 “图 层 0 副本 ”图 层 , 如 图 9-9 所 示 。 

CD 选择 “编辑 ”变换 ”~ 旋转 90 度 ( 顺 时 针 )” 命 令 ,效果 如 图 9-10 所 示 。 

(8) 在 图 层面 板 中 将 “图 层 0 副本 ”的 混合 模式 设 为 “正片 琶 底 ”, 选 择 “ 图 层 ”>“ 合 并 图 
层 ” 命 令 ,参数 设置 如 图 9-11 所 示 。 
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(9) 选择 “ 滤 镜 ”>“ 扭 曲 ”>“ 切 变 ” 命 令 , 弹 出 “ 切 变 ”对 话 框 ,参数 设置 如 图 9-12 所 示 ， 
应 用 效果 如 图 9-13 所 示 。 

(10) 选择 “图 像 *>“ 旋 转 画 布 ”>“90 度 ( 顺 时 针 )” 命 令 旋转 画布 , 按 Ctrl+F 键 再 使 用 
一 次 “ 切 变 滤 镜 ”, 效 果 如 图 9-14 所 示 。 

QD 选择 “图 像 ” 盖 调整 ”一 反 相 ?命令 ,产生 如 图 9-15 所 示 的 效果 。 
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(12) 将 前 景色 设置 为 黑色 ,选择 工具 箱 中 的 “渐变 工具 ”, 选 择 “* 线 性 渐变 ”模式 , 单 击 渐 
变 编 辑 器 按钮 ,选择 预 置 的 “前 景 到 透明 ?渐变 ( 见 图 9-16) . 按 住 Shift 键 在 图 像 中 分 别 从 上 
至 下 和 从 下 至 上 拖 动 鼠标 ,效果 如 图 9-17 所 示 。 

(13) 选择 “ 滤 镜 ”一 “扭曲 ”>“ 极 坐标 ”命令 ,弹出 “ 极 坐 标 ” 对 话 框 ,在 其 中 选择 “平面 坐 
标 到 极 坐 标 ”, 如 图 9-18 所 示 。 应 用 效果 如 图 9-19 所 示 。 

(14) 选择 “图 像 ">“ 调 整 *>“ 色 相 / 饱 和 度 ” 命 令 ,参数 设 置 如 图 9-20 所 示 , 应 用 效果 
如 图 9-21 所 示 。 

(15) 从 工具 箱 中 选择 文字 工具 ,输入 “创意 ”2 字 , 字 体 隶 书 ,颜色 为 白色 , 按 下 Ctrl 十 T 
键 使 用 自由 变换 工具 把 文字 拉 放 ,如 图 9-22 所 示 。 

(16) 在 图 层面 板 中 双击 文字 图 层 , 在 弹出 的 “图 层 样式 ”对 话 框 中 选择 “ 描 边 ”选项 , 参 
数 设置 如 图 9-23 Bros. 
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9-22 图 9-23 


(17) 再 从 工具 箱 中 选择 文字 ,输入 “100fun” 几 个 字 , 如 图 9-24 所 示 , 并 且 从 样式 面板 中 
选择 相应 的 样式 ,如 图 9-25 所 示 。 

(18) 使 用 “编辑 "“ 自 由 变换 ”对 相应 的 图 层 进行 一 定 的 大 小 和 位 置 变换 ,效果 如 
图 9-26 所 示 ,然后 选择 “图 层 ”>“ 合 并 可 见 图 层 ” 命 令 。 


(19) 选择 “文件 ”>“ 存 储 ” 命 令 , 在 弹出 的 “存储 "对话 框 中 ,选择 存储 位 置 后 单 击 “ 存 
储 ? 按 钮 。 至 此 ,一 个 Logo 就 制作 完成 了 。 


9.1.2 设计 网 站 Banner 


网 站 广告 设计 跟 传 统 广告 设计 有 着 很 多 的 相似 性 ,它们 都 重 在 传达 一 定 的 形象 与 信息 ,但 
由 于 网 络 本 身 的 限制 以 及 浏览 习惯 的 不 同 , 网 站 Banner 还 有 许多 不 同 的 特点 。 网 站 广告 一 般 
要 求 简单 醒目 ,除了 要 在 有 限 的 空间 内 表达 一 定 的 形象 与 信息 外 ,还 得 兼顾 美观 与 协调 。 

1. Banner 的 设计 准则 

网 页 上 的 广告 条 主要 有 一 个 特点 要 
需 遵 循 以 下 一 些 基本 准则 。 


,就 是 醒目 ,能 吸引 人 的 注意 力 。 网 站 广告 设计 
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只 要 Banner 设计 得 非常 漂亮 ,让 人 看 上 去 很 舒服 ,即使 不 是 人 们 想 要 看 的 东西 ,或 者 是 
一 些 他 们 可 看 不 看 的 东西 ,他 们 也 会 很 有 兴趣 去 看 。 

在 设计 网 页 Banner 中 使 用 文字 时 ,一 定 要 文字 清晰 .字体 合适 ,不 要 太 小 也 不 要 过 大 。 
字体 作为 设计 中 非常 重要 的 一 环 ,应 弄 清 字体 的 应 用 场合 。 一 般 情况 下 无 论 字 体 还 是 图 像 
都 得 保持 风格 的 一 致 性 ,因此 在 字体 大 小 写 的 选择 上 也 要 遵循 这 个 规律 。 字 体 放 置 在 哪里 
没有 固定 的 格式 ,要 注意 整体 协调 均匀 。 

广告 中 的 文字 一 般 从 左 到 右 `, 从 上 到 下 排列 ,这 样 便于 阅读 ,因为 人 们 习惯 从 左 到 右 、 从 
上 到 下 看 。 

文字 与 广告 条 的 边缘 之 间 要 留 有 一 定 的 空间 ,这 样 才 能 使 它们 更 明显 ,避免 广告 条 中 布 
满 密密麻麻 的 文字 。 

在 广告 词 中 最 好 告知 浏览 者 单 击 后 将 能 看 到 什么 ,可 用 一 些 较 有 诱惑 力 的 语言 激 起 浏 
览 者 的 欲望 。 

广告 条 要 与 整个 网 页 相 协调 ,同时 又 要 突出 、 醒 目 。 

2. Banner 的 实例 制作 

CD 准备 一 些 关于 商品 的 素材 图 片 ,这 类 型 的 图 片 在 网 上 比较 多 ,像素 不 必 太 高 ,但 网 
上 找到 的 图 片 都 有 一 个 白色 部 分 影响 创作 效果 ( 见 图 9-27) ,因此 要 把 白色 部 分 去 掉 。 
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d 
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(2) 这 里 我 们 使 用 Photoshop 软件 来 解决 。 首 先 在 Photoshop 中 打开 这 些 图 片 , 如 
图 9-28 所 示 。 之 后 复制 背景 图 层 ,如 图 9-29 所 示 。 

(3) 把 已 经 锁定 的 背景 图 层 删 除 掉 , 如 图 9-30 所 示 。 

Са) 删除 掉 背 景 图 层 后 使 用 魔 棒 工 具 把 图 片 的 白色 部 分 选中 ( 见 图 9-31), 并 按 下 
Delete 键 ,这 样 背 景色 就 变 成 透明 了 ,如 图 9-32 所 示 。 

(5) 按 下 Cul-- D 键 取消 选择 ,并 把 图 片 保存 为 gif 图 片 。 

(6) 其 他 图 片 如 法 炮制 ,把 白色 背景 设置 成 透明 ,如 图 9-33 所 示 。 
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图 9-33 


(7) 现在 开始 制 做 广告 Banner, 首 先 打开 Fireworks 软件 ,并 新 建 一 个 468X 60 像素 的 
文档 ,画布 颜色 为 白色 ,具体 参数 设置 如 图 9-34 所 示 。 


1 
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图 9-34 


(8) 使 用 圆 形 工具 在 画布 上 画 一 个 大 圆 ,颜色 设置 成 绿色 ,使 用 黑色 指针 放 到 如 图 9-35 


所 示 位 置 。 


图 9-35 


(9) 再 画 一 个 小 圆 , 设 置 的 颜色 稍微 深 色 一 点 ,使 用 黑色 指针 放置 到 如 图 9-36 所 示 位 置 。 


图 9-36 


(10) 把 “ 层 1? 设 置 成 共享 层 , 如 图 9-37 所 示 。 并 新 建 “ 层 2”, 如 图 9-38 所 示 。 


图 9-37 图 9-38 


(OD 选 定 “ 层 2”, 使 用 文字 工具 在 小 圆 上 输入 一 个 白色 的 “最 ” 字 , 之 后 调整 一 下 字 的 大 
小 ,效果 如 图 9-39 所 示 。( 注 意 : 要 选 定 “ 层 2” 后 再 继续 下 面 的 操作 ) 

aD 使 用 和 (11) 一 样 的 方法 输入 一 个 “新 ” 字 , 并 调整 字体 大 小 ,如 图 9-40 所 示 。 

(13) 选 定 “新 " 字 ,选择 “修改 ”>“ 变 形 ”>“ 任 意 变形 ”命令 ,把 “新 ” 字 修改 得 修长 点 , 效 
果 如 图 9-41 所 示 。 
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图 9-41 


OA) 选择 "文件 ”导入 ”命令 ,导入 一 台 主 机 的 图 片 ,调整 到 合适 大 小 ,如 图 9-42 
所 示 。 对 图 片 应 用 一 个 滤 镜 , 即 选 择 * 阴 影 与 光 晕 ”一 ”发 光 ” 命 令 , 具 体 参 数 设 置 如 图 
9-43 所 示 。 


图 9-42 


(15) 使 用 文字 工具 输入 文字 “台式 电脑 ”, 如 图 9-44 所 示 。 
(16) 打开 帧 面板 ,把 帧 延 时 调整 到 100, 如 图 9-45 所 示 ,把 第 一 帧 拖 放 到 面板 下 面 的 画 
按钮 上 ,复制 一 帧 。 


m Ө 100 


(UD. 选中 第 二 帧 ,把 台式 机 的 图 片 和 文字 删除 , 按 上 述 的 方法 导入 其 他 图 片 和 文字 做 
好 另外 两 张 图 片 ,分 别 如 图 9-46 和 图 9-47 所 示 。 


= 


图 9-46 
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图 9-47 


(18) 继续 复制 帧 ,把 原来 的 图 片 和 文字 删除 ,输入 “ 尽 在 www. shop. com”, 按 实际 情况 
调整 文字 大 小 和 颜色 ,如 图 9-48 所 示 。 


图 9-48 


aD 为 文字 添加 一 个 滤 镜 ,在 文字 面板 中 单 击 " 十 ”>“ 模 糊 ”>“ 缩 放 模糊 "命令 ,参数 
设置 如 图 9-49 所 示 。 效 果 如 图 9-50 所 示 。 


(20) 再 复制 一 帧 ,选中 文字 , 按 下 *-” 把 文字 的 滤 镜 删除 。 
(21) 至 此 ,设计 基本 完成 ,选择 “文件 ”>“ 导 出 向 导 ” 命 令 , 导 出 图 形 , 按 默认 方式 进行 
导出 ,导出 的 参数 设置 如 图 9-51 至 图 9-53 所 示 。 
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图 9-52 
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图 9-53 


9.2 网 站 的 整体 风格 和 创意 设计 


9.2.1 网 站 的 整体 风格 


风格 (style) 是 抽象 的 。 是 指 站 点 的 整体 形象 给 浏览 者 的 综合 感受 。 举 个 例子 : 我 们 党 
得 网 易 是 平易 近 人 的 ,迪斯尼 是 生动 活泼 的 .IBM 是 专业 严肃 的 。 这 些 都 是 网 站 建设 者 在 
设计 过 程 中 给 人 们 留 下 的 不 同感 受 。 风 格 是 独特 的 ,是 站 点 不 同 与 其 他 网 站 的 地 方 。 或 者 
色彩 ,或 者 技术 ,或 者 是 交互 方式 ,能 让 浏览 者 明确 分 辨 出 这 是 你 的 网 站 独 有 的 。 风 格 是 有 
性 格 的 。 通 过 网 站 的 外 表 、 内 容 、 文 字 、 交 流 方式 可 以 概括 出 一 个 站 点 的 个 性 、 情 绪 。 是 温文 
儒雅 ,是 执著 热情 ,是 活泼 易 变 ,是 放任 不 蚜 。 像 诗词 中 的 “豪放 派 ” 和 ”婉约 派 ”, 你 可 以 用 人 
的 性 格 来 比喻 站 点 。 

有 风格 的 网 站 与 普通 网 站 的 区 别 在 于 : 普通 网 站 你 看 到 的 只 是 堆砌 在 一 起 的 信息 ,你 
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只 能 用 理性 的 感受 来 描述 ,比如 信息 量 大 小 、 浏 览 速 度 快慢 。 但 你 浏览 过 有 风格 的 网 站 后 你 
能 有 更 深 一 层 的 感性 认识 。 尽 管 看 了 以 上 的 介绍 .你 可 能 对 风格 是 什么 依然 模糊 。 其 实 风 
格 就 是 一 句 话 : 与 众 不 同 ! 如 何 树立 网 站 风格 呢 ? 大 致 分 为 以 下 几 个 步骤 : 

(1) 确信 风格 是 建立 在 有 价值 内 容 之 上 的 。 一 个 网 站 有 风格 而 没有 内 容 , 就 好 比 绣花 
枕头 一 包 草 ,好 比 一 个 性 格 傲慢 但 却 目 不 识 丁 的 人 。 你 首先 必须 保证 内 容 的 质量 和 价值 性 。 
这 是 最 基本 的 , 星 良 置疑 的 。 

(2) 你 需要 彻底 搞 清楚 自己 希望 站 点 给 人 的 印象 是 什么 。 

(3) 在 明确 自己 的 网 站 印象 后 ,开始 努力 建立 和 加 强 这 种 印象 。 经 过 第 二 步 印 象 的 * 量 
化 ”后 ,你 需要 进一步 找 出 其 中 最 有 特色 、 特 点 的 东西 ,就 是 最 能 体现 网 站 风格 的 东西 。 并 以 
它 作为 网 站 的 特色 加 以 重点 强化 和 宣传 。 风 格 的 形成 不 是 一 次 定位 的 ,你 可 以 在 实践 中 不 
断 强化 .调整 .修饰 。 

由 于 网 站 建立 的 目的 不 同 , 所 提供 的 服务 和 面向 的 群体 也 不 同 ,建立 站 点 时 要 根据 设计 
原则 ,针对 浏览 者 确定 适当 的 风格 。 

可 以 针对 浏览 者 的 不 同年 龄 .不 同 职业 表现 出 不 同 的 设计 风格 。 面 向 青少年 的 网 站 页 
面 要 设计 得 活泼 .明快 ;面向 女性 的 则 要 体现 细腻 温暖 的 感觉 ,一 般 以 暖色 为 主 ; 对 于 艺术 工 
作者 ,应 当 注意 页 面 的 设计 感 ,浪漫 而 有 特色 ;面向 科学 工作 者 则 应 体现 严谨 、 理 性 和 科学 的 
风格 。 

在 一 个 网 站 之 中 ,如 何 把 确定 好 的 风格 完整 地 保持 下 去 也 是 一 个 重要 的 问题 。 即 使 一 
个 网 站 的 首页 风格 很 有 特色 ,如 果 在 一 级 页 面 、 底 层 页 面 不 能 够 把 这 种 设计 风格 延续 下 去 ， 
那么 这 也 是 一 个 失败 的 设计 。 我 们 常常 可 以 看 到 一 些 网 站 的 页 面 之 间 的 设计 完全 不 能 够 衔 
接 , 整 个 网 站 无 序 、 繁 杂 , 这 一 方面 可 能 是 由 于 不 同 的 页 面 使 用 了 不 同 的 设计 师 ,设计 风格 自 
然 不 同 , 另 一 方面 也 可 能 是 设计 者 缺乏 设计 能 力 ,而 对 其 他 网 站 的 设计 进行 抄袭 拼凑 的 结 
果 。 所 以 ,设计 一 个 好 的 网 站 ,首先 要 求 设计 师 有 过 硬 的 设计 功底 , 另 一 方面 也 不 能 使 用 过 
多 的 设计 师 。 一 个 网 站 应 该 是 一 个 设计 师 的 作品 , 强 强 联合 在 这 里 可 能 起 到 相反 的 作 
用 一 一 削弱 了 网 站 的 整体 感 。 当 然 本 书 的 学 习 不 一 定 是 只 为 了 培养 一 个 网 站 设计 师 ,通过 
学 习 网 站 的 设计 方法 ,首先 可 以 从 一 个 合格 的 网 页 制作 者 做 起 。 

一 个 简单 的 保持 网 站 内 部 设计 风格 统一 的 办 法 是 ,保持 某 一 部 分 固定 不 变 , 如 Logo, F 
航 条 等 ,另外 也 可 以 设计 相同 风格 的 图 标 、 图 片 等 ,以 下 是 这 些 内 容 的 操作 方法 : 

1. 网 站 标志 与 名 称 设计 

网 站 标志 与 名 称 关系 到 网 站 的 总 体形 象 , 也 是 企业 形象 (CD 设计 的 一 个 方面 。 有 的 企 
业已 有 自身 的 标志 ,自然 应 该 在 网 站 上 使 用 ;有 的 企业 没有 标志 ,就 应 该 考虑 设计 一 个 体现 
企业 形象 的 标志 并 运用 到 网 站 上 。 

对 于 网 站 的 名 称 , 起 名 时 应 该 做 到 合法 、 合 理 、 合 情 。 虽 然 “ 中 国 X XX 网 站 ”“ 国 际 X x 
网 站 ”的 名 称 听 起 来 气魄 很 大 ,但 如 果 不 能 做 到 名 副 其 实 ,就 没有 人 会 再 次 访问 该 网 站 。 其 
实 ,对 于 企业 而 言 ,企业 的 名 字 就 是 最 简洁 的 网 站 的 名 字 。 当 然 , 所 有 有 创意 的 名 字 都 能 起 
到 较 好 的 效果 。 

通常 ,在 网 站 主要 页 面 上 的 显要 位 置 ,应 该 设计 一 个 包含 网 站 标志 、 网 站 名 称 的 横幅 , 它 
可 以 是 静态 的 图 像 , 但 最 好 能 使 用 具有 动态 效果 的 动画 。 其 中 ,网 站 横幅 除了 企业 标志 与 网 
站 名 称 外 ,还 有 以 下 一 些 内 容 : 
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° 网 站 有 代表 性 的 人 、 事 、 物 

。 专业 性 网 站 的 代表 性 物品 

。 企业 英文 名 称 

。 企业 网 站 的 网 址 

多 参考 一 些 著名 公司 的 网 站 名 称 与 标志 ,并 与 公司 的 CI 设计 人 员 与 公共 关系 部 门人 员 
取得 联系 ,听取 他 们 的 意见 ,可 对 网 站 的 名 称 与 标志 设计 带 来 帮助 。 

2. 网 站 标准 色彩 的 设计 

色彩 是 人 的 视觉 最 敏感 的 东西 。 网 页 的 色彩 处 理 得 好 ,可 以 锦上添花 ,达到 事半功倍 的 
效果 。 色 彩 总 的 应 用 原则 是 总 体 协调 ,局 部 对 比 。 即 网 页 的 整体 色彩 效果 应 该 是 和 谐 的 ,只 
有 局 部 的 ,小 范围 的 地 方 可 以 有 一 些 抢眼 色彩 的 对 比 。 

在 色彩 的 具体 运用 上 ,可 以 根据 网 页 内 容 的 需要 ,分 别 采 用 不 同 的 主 色调 。 因 为 色彩 具 
有 象征 性 ,如 嫩绿 色 、 浴 绿色 、 黄 色 和 灰 褐 色 就 可 以 分 别 象 征 着 春 、 夏 、 秋 、 冬 。 其 次 有 职业 的 
标志 色 ,如 军 警 的 橄榄 绿 ,医疗 卫生 的 白色 等 色彩 还 具有 明显 的 心里 感觉 。 另 外 ,色彩 还 有 
民族 性 ,各 个 民族 由 于 生活 环境 、 文 化 ,传统 等 因素 的 不 同 ,对 于 色彩 的 喜好 也 存在 着 较 大 的 
差异 。 充 分 运用 色彩 的 这 些 特性 ,可 以 使 网 页 具有 深刻 的 艺术 内 涵 , 从 而 提升 网 站 的 文化 
品位 。 

当 看 到 色彩 时 ,受到 其 物理 方面 的 影响 ,心理 也 会 立即 产生 感觉 。 这 种 感觉 一 般 难以 用 
言语 形容 , 称 之 为 印象 ,也 称 色彩 印象 。 

下 面 介绍 几 个 色彩 的 色彩 印象 : 

(1) 红色 

由 于 红色 容易 引起 注意 ,所 以 在 各 种 媒体 中 被 广泛 应 用 。 在 很 多 使 用 红色 的 网 站 中 , 红 
色 基 本 上 是 强调 色 。 色 调 较 暗 时 ,红色 反而 容易 给 人 冷静 沉着 的 感觉 ,营造 古典 高 贵 的 气 
氛 。 它 除了 具有 和 较 佳 的 明 视 效果 外 ,更 被 用 来 传达 有 活力 、 积 极 .热诚 温暖 .前 进 、 喜 庆 等 含 
义 , 如 图 9-54 所 示 。 


图 9-54 


(2) 橙色 
Ri 8] LEE fs ,也 是 一 种 积分 的 色彩 ,具有 轻快 欢欣、 热烈 .温馨 和 时 尚 的 效果 。 由 于 
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检 色 非常 明亮 鲜艳 ,所 以 在 运用 橙色 时 ,要 选择 搭配 的 色彩 和 表现 方式 ,才能 把 橙色 明亮 、 活 
泌 且 具有 口感 的 特性 表现 出 来 ,如 图 9-55 所 示 。 


图 9-55 


(3) 灰色 

在 商业 设计 中 ,灰色 具有 柔和 和 高 雅 的 意向 ,而 且 属于 中 间 性 格 , 男 女 皆 能 接受 ,所 以 也 
是 永远 流行 的 主要 颜色 。 在 许多 的 高 科技 产品 ,尤其 是 和 金属 材料 有 关 的 网 站 ,几乎 都 采用 
灰色 来 传达 高 级 和 科技 的 形象 。 使 用 灰色 时 ,大 多 利用 不 同 的 层次 变化 进行 组 合 或 配 用 其 
他 色彩 , 才 不 会 给 人 过 于 平淡 沉闷 、 呆 板 和 僵硬 的 感受 ,如 图 9-56 所 示 。 
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图 9-56 


(4) 白色 

在 商业 设计 中 ,白色 具有 洁白 .明快 纯真 和 清洁 的 意象 。 通 常 需 和 其 他 色彩 搭配 使 用 。 
纯 白 色 会 带 给 别人 寒冷 .严峻 的 感受 ,所 以 在 使 用 白色 时 ,都 会 摊 一 些 其 他 的 色彩 ,如 象牙 
白 、 米 白 、 乳 白 和 苹果 白 等 。 在 生活 用 品 、 服 饰 用 色 上 ,白色 是 永远 流行 的 主要 色 , 可 以 和 任 
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何 颜色 作 搭 配 。 

(5) 黄色 

黄色 明 视 度 高 ,具有 快乐 ,希望 .智慧 和 轻快 的 个 性 。 黄 色 是 网 站 配色 中 使 用 较 多 的 一 
种 颜色 ,因为 黄色 能 被 大 部 分 人 认可 。 小 到 个 人 站 ,大 到 综合 性 门户 网 站 ,黄色 几乎 可 以 在 
每 个 角落 找到 自己 的 发 挥 空间 。 图 9-57 所 示 为 黄 绿色 的 IT 类 网 站 。 
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(6) 绿色 

绿色 代表 新 鲜 .希望 .利平 . 柔 和 、 安 逸 和 青春 。 绿 色 是 具有 黄色 和 蓝 色 两 种 成 分 的 颜 
色 。 一 般 农林 业 教育 类 网 站 常 使 用 绿色 来 表现 希望 充满 活力 的 形象 。 

(7) 紫色 

由 于 具有 强烈 的 女性 化 性 格 ,在 商业 设计 用 色 中 ,紫色 受到 相当 限制 。 除 了 和 女性 有 关 
的 商品 或 企业 形象 之 外 ( 见 图 9-58) .其 他 类 的 设计 不 常 采 用 紫色 为 主 。 

(8) 褐色 

在 商业 设计 中 ,褐色 通常 用 来 表现 原始 材料 的 质感 ,如 麻 、 木 材 、 竹 片 、 软 木 等 ,也 用 来 传 
达 某 些 饮 品 原料 的 色泽 及 味 感 ,如 咖啡 、 茶 、 麦 类 等 ,还 可 以 强调 古典 优雅 的 企业 或 商品 
形象 。 

3. 网 站 相关 页 面 的 布局 设计 

网 页 设计 作为 一 种 视觉 语言 ,要 讲究 编排 和 布局 ,虽然 主页 的 设计 不 等 同 于 平面 设计 ， 
但 它们 有 许多 相近 之 处 ,应 充分 加 以 利用 和 借鉴 。 

版 式 设计 可 以 通过 文字 图 像 的 空间 组 合 , 表 达 出 和 谐 与 美 。 版 式 设计 通过 设计 要 素 的 
理性 分 析 和 严格 的 形式 构成 训练 ,培养 设计 者 对 整体 画面 的 把 握 能 力 和 审美 能 力 。 一 个 优 
秀 的 网 页 设计 者 应 该 知道 某 一 个 图 形 该 落 于 何 处 ,才能 使 整个 网 页 生 辉 。 

相关 网 页 布局 努力 做 到 整体 布局 合理 化 有 序 化 、 整 体 化 。 优 秀之 作 , 善 于 以 巧妙 ,合理 
的 视觉 方式 使 一 些 语 言 无 法 表达 的 思想 得 以 阐述 .做 到 丰富 多 样 而 又 简洁 明了 。 
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图 9-58 


多 页 面 站 点 的 页 面 编排 设计 ,要 求 把 页 面 之 间 的 有 机 联系 反映 出 来 ,这 里 主要 的 问题 是 
页 面 之 家 和 页 面 内 容 的 关系 。 为 了 达到 最 佳 的 视觉 表现 效果 ,应 讲究 整体 布局 的 合理 性 。 
特别 是 关系 十 分 紧密 的 有 上 下 文 关系 的 页 面 ,应 该 设计 有 向 前 和 向 后 的 按钮 ,便于 浏览 者 仔 
细 研 读 。 

为 了 使 站 点 设计 简单 有 序 , 主 次 关系 分 明 , 应 将 凌乱 页 面 的 组 织 过 程 混 杂 的 内 容 依 整 
体 布 局 的 需要 进行 分 组 归纳 ,并 进行 具有 内 在 联系 的 组 织 排列 ,反复 推荐 文字 、 图 形 与 空间 
的 关系 ,使 浏览 者 有 一 个 流畅 的 体验 。 

也 不 是 把 一 个 页 面 设计 得 越 丰富 越 好 ,适当 地 空 出 一 些 地 方 可 能 会 给 访问 者 更 好 的 
感觉 。 

4. 掌握 形式 设计 要 点 : 形式 与 内 容 和 谐 统一 

形式 服务 于 内 容 , 内 容 又 为 目的 服务 ,形式 与 内 容 的 统一 是 设计 网 页 的 基本 原则 之 一 。 
画面 的 组 织 原则 中 ,将 丰富 的 以 及 和 多 样 的 形式 组 织 在 一 个 统一 的 结构 里 ,形式 语言 必须 符 
合 页 面 的 内 容 ,体现 内 容 的 丰富 含义 。 

应 合理 地 运用 对 比 与 调和 、 对 称 与 平衡 .节奏 与 韵律 以 及 留 白 等 手段 ,如 通过 空间 、 文 
字 、 图 形 之 间 的 相互 关系 建立 整体 的 均衡 状态 ,产生 和 谐 的 美感 。 应 用 对 称 原则 设计 的 页 
面 ,有 时 会 显得 呆板 ,但 如 果 加 入 一 些 动 感 的 文字 、 图 案 , 或 采用 夸张 的 手法 来 表现 内 容 往 往 
会 达到 比较 好 的 效果 。 

点 , 线 、 面 是 视觉 语言 中 的 基本 元 素 ,可 以 使 用 点 , 线 、 面 互相 穿插 、 互 相 裤 托 、 互 相 补 充 ， 
构成 最 佳 页 面 效 果 。 

点 是 所 有 空间 形态 中 最 简洁 的 元 素 , 也 可 以 说 是 最 活跃 .最 不 安 分 的 元 素 。 设 计 中 ,一 
个 点 就 可 以 包罗 万 象 ,体现 设计 者 的 无 限 心思 ,网 页 中 的 图 标 、 单 个 图 片 \ 按 钮 或 一 段 文字 等 
都 可 以 说 是 点 。 点 是 灵活 多 变 的 ,我 们 可 以 将 一 排 文字 视 为 一 个 点 ,将 一 个 图 形 视 为 一 个 
点 。 在 网 页 设计 中 的 点 ,由 于 大 小 ,形态 .位置 的 不 同 会 给 人 不 同 的 心理 感受 。 
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线 是 点 移动 的 轨迹 , 线 在 编排 设计 中 有 强调 、 分 割 . 导线、 视觉 线 的 作用 。 线 会 因 方向 形 
态 的 不 同 而 产生 不 同 的 视觉 感受 ,例如 垂直 的 线 给 人 平稳 .挺立 的 感觉 , 弧 线 使 人 感到 流畅 、 
轻 鳃 ,曲线 给 入 跳动 不安 的 感受 。 在 页 面 中 内 容 较 多 时 ,就 需要 进行 版 面 分 割 , 通 过 线 的 分 
割 保证 页 面 良好 的 视觉 秩序 。 页 面 在 直线 的 分 割 下 ,会 产生 和 谐 的 美感 ;通过 不 同比 例 的 空 
间 分 割 ,会 产生 空间 层次 韵律 感 。 

面 的 形态 除了 规则 的 集合 行 体外 ,还 有 其 他 一 些 不 规则 的 形态 ,可 以 说 表现 形式 是 多 种 
多 样 的 。 面 在 平面 设计 中 是 通过 点 的 扩大 ` 线 的 重复 形成 的 。 面 给 人 以 整体 美感 ,使 空间 层 
次 丰富 ,使 单一 的 空间 多 元 化 ,表达 比较 含蓄 。 

网 页 设计 中 点 ` 线 \ 面 的 运用 并 不 是 孤立 的 ,很 多 时 候 都 需要 将 它们 结合 起 来 ,表达 完美 
的 设计 意境 。 

5. 三 维 空间 的 风格 设计 

网 络 上 的 三 维 空间 是 一 个 假象 空间 ,这 种 空间 关系 需 借助 动静 变化 、 图 像 的 比例 关系 等 
空间 因素 表现 出 来 。 

在 页 面 中 图 片 ,文字 位 置 前 后 琶 压 ,或 位 置 玻 密 ,或 页 面 上 \ 左 .中 .下 位 置 所 产生 的 视觉 
效果 都 各 不 相同 。 在 网 页 上 ,图 片 . 文 字 前 后 释 压 所 构成 的 空间 层次 目前 还 不 多 见 , 网 上 更 
多 的 是 一 些 设计 得 比较 规范 化 ,简明 化 的 页 面 ,这 种 释 压 排列 能 产生 强 节奏 的 空间 层次 , 视 
觉 效 果 强 烈 。 网 页 上 常见 的 是 页 面 上 \ 左 \ 右 `、 下 .中 位 置 所 产生 的 空间 关系 ,以 及 下 密 的 位 
牌 关 系 所 产生 的 空间 层次 ,这 两 种 位 置 关系 使 视觉 流程 生动 而 清晰 ,视觉 瞩目 程度 高 。 

疏 密 的 位 置 关系 使 产生 的 空间 层次 富有 弹性 ,同时 也 让 人 产生 轻松 或 紧迫 的 心理 感受 。 

6. 多 媒体 功能 的 风格 设计 

因特网 最 大 的 资源 优势 在 于 多 媒体 功能 ,因而 应 尽 一 切 努 力 挖掘 它 , 吸 引 浏览 者 保持 注 
意 力 。 

但 由 于 网 络 带宽 的 限制 ,在 使 用 多 媒体 的 形式 表现 网 页 的 内 容 时 应 考虑 客户 端的 传输 
速度 ,或 者 说 将 多 媒体 的 内 容 控制 在 用 户 可 接收 的 时 间 内 是 十 分 必要 的 。 因 而 画面 的 内 容 
应 当 有 一 定 的 实用 性 ,如 产品 的 介绍 甚至 可 以 用 三 维 展示 与 虚拟 现实 模拟 三 维 展示 。 其 中 
Java 捅 件 模拟 三 维 展示 又 包括 以 下 两 种 主要 的 展示 方式 。 

实景 互动 360" 图 片 : 是 利用 专利 技术 一 一 鱼 眼 镜头 摄影 两 张 183 的 球形 图 片 , 通 过 专 
业 的 软件 把 两 幅 图 像 缝 合 起 来 做 成 一 个 图 像 。 

360 全 景 摄影 : 是 以 数码 相机 加 上 三 脚 架 在 固定 影 点 处 以 30 或 更 少 的 角度 旋转 相机 ， 
连续 拍摄 12 一 20 张 以 上 的 数码 影像 。 

随 着 Web 的 普及 和 计算 机 技术 的 迅猛 发 展 , 人 们 对 Web 语言 的 要 求 也 日 益 增 长 。 人 
们 已 不 满足 于 HTML 编制 的 二 维 Web 页 面 ,三 维 世 界 的 诱惑 开始 吸引 更 多 的 人 。 这 时 , 需 
要 用 虚拟 现实 的 技术 在 Web 网 上 展示 其 迷人 的 风采 ,于 是 很 多 其 他 的 语言 出 现 了 ,如 
Vrml。Vrml 是 一 种 面向 对 象 的 语言 . 它 类 似 Web 超 链接 所 使 用 的 HTML, 也 是 一 种 基于 
文本 的 语言 ,并 可 以 运行 在 多 种 平台 之 上 .能 够 更 多 地 为 虚拟 现实 环境 服务 。Vrml 只 是 一 
种 语言 ,对 于 三 维 环境 的 艺术 设计 仍 需 要 理论 和 实践 指导 。 

当然 ,充分 合理 地 利用 图 像 处 理 、 音 频 、 视 频 及 动画 多 种 形式 ,可 以 使 网 站 的 页 面 更 具有 
RAZ, 
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7. 文字 与 段落 的 风格 设计 

不 要 轻易 让 文字 居中 和 只 用 粗 体 或 斜体 。 除 了 视觉 混乱 之 外 ,很 多 浏览 器 不 能 很 好 地 
显示 和 斜体 字 ,也 不 能 补偿 由 于 字符 倾斜 引起 的 空白 变化 。 

应 尽量 利用 短 的 段落 ,多 利用 项 目 符号 显示 列表 。 应 用 影像 地 图 指引 主要 链接 ,使 页 面 
能 吸引 人 和 容易 阅读 。 对 于 较 多 内 容 的 显示 ,应 该 注意 显示 的 技巧 。 如 让 用 户 注 册 一 个 账 
户 时 ,如 果 网 站 经 营 者 想 让 顾客 在 注册 时 填写 十 几 个 以 上 的 问题 时 ,这 些 问题 一 次 性 都 出 现 
在 一 个 屏幕 上 显然 不 是 明智 的 选择 ,因为 那样 用 户 很 可 能 被 吓 跑 了 。 较 好 的 做 法 是 每 次 给 
出 少数 几 个 问题 ,然后 分 几 个 屏幕 把 是 几 个 问题 分 开 显示 ,使 用 户 一 次 在 一 个 屏幕 上 看 到 的 
问题 数量 不 多 。 此 时 ,用 户 自然 感到 更 轻松 。 

8. 图 像 运用 的 风格 设计 
图 像 运用 时 ,不 必 再 以 页 面 上 填 满 图 像 来 增加 视觉 趣味 ,而 尽量 使 用 彩色 圆 点 一 一 它们 
较 小 并 能 为 列表 项 增加 色彩 活力 (并 能 用 于 彩色 列表 )。 彩 色 分 割 条 也 能 在 不 扰乱 带宽 的 情 
况 下 增强 图 形 感 。 
图 像 的 格式 应 做 选择 ,在 不 影响 图 像 效 果 的 前 提 下 ,应 该 选择 文件 容量 更 小 的 图 像 。 对 
于 有 很 多 图 像 要 显示 的 页 面 ,开始 应 该 显示 一 个 小 的 图 像 ,如 果 用 户 想 观 察 高 质量 的 大 图 
像 ,可 以 由 用 户 单 击 小 图 像 获 得 。 

对 用 作 背 景 的 GIF 格式 要 谨慎 。GIF 格式 可 以 使 一 个 页 面 看 起 来 很 有 趣 , 甚至 很 专 
业 , 但 是 装饰 背景 很 容易 使 文字 变 得 不 可 辨 读 。 要 把 背景 做 得 好 , 光 有 颜色 对 比 是 不 够 的 。 
背景 要 么 很 亮 (文字 较 暗 ) ,要 么 很 暗 (文字 较 亮 )。 如 果 背 景 含有 图 像 , 对 比 度 要 设置 得 较 
低 , 这 样 才 不 至 于 过 于 分 散 读者 的 注意 力 。 


9.2.2 网 站 的 创意 设计 


创意 是 网 站 生存 的 关键 。 如 何 挖掘 创意 的 来 源 ? 一 个 出 色 的 创意 并 不 是 信 手 牛 来 的 ， 
它 需 要 完成 很 多 工作 。 对 一 个 创意 策划 人 员 来 讲 首先 要 有 敏锐 的 头脑 去 捕捉 稍 瞬 即 逝 的 灵 
感 ,其 次 是 用 坚持 不 懈 的 工作 来 实现 创意 。 

创意 到 底 是 什么 ,如 何 产生 创意 呢 ? 

创意 是 引人入胜 ,精彩 万 分 ,出 其 不 意 的 。 

创意 是 捕 提出 来 的 点 子 , 是 创作 出 来 的 奇 招 …… 

创意 (idea) 是 网 站 建设 生存 的 关键 。 这 一 点 相信 大 家 都 已 经 认同 。 然 而 作为 网 页 设计 
师 , 最 苦恼 的 就 是 没有 好 的 创意 来 源 。 注 意 , 这 里 说 的 创意 是 指 站 点 的 整体 创意 。 创 意 到 底 
是 什么 ,如 何 产 生 创意 呢 ? 创意 是 引人入胜 ,精彩 万 分 ,出其不意 的 ;创意 是 捕捉 出 来 的 点 
子 , 是 创作 出 来 的 奇 招 。 这 些 讲法 都 说 出 了 创意 的 一 些 特点 ,实质 上 ,创意 是 传达 信息 的 一 
种 特别 方式 。 创 意 并 不 是 天 才 者 的 灵感 ,而 是 思考 的 结果 。 

创意 是 将 现 有 的 要 素 重新 组 合 。 资 料 越 丰富 . 越 容易 产生 创意 。 就 好 比 万 花 简 , 简 内 的 
玻璃 片 越 多 ,所 呈现 的 图 案 越 多 。 你 如 果 有 心 可 以 发 现 ,网 络 上 的 最 多 的 创意 来 自 与 现实 生 
活 的 结合 ,如 在 线 书店 .电子 社区 在线 拍 卖 。 你 是 否 想到 了 一 种 更 好 的 创意 呢 ? 值得 一 提 
的 是 : 创意 的 目的 是 更 好 的 宣传 推广 网 站 。 如 果 创 意 很 好 , 却 对 网 站 发 展 毫 无 意义 ,我 们 宁 
可 放弃 这 个 创意 。 
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创意 思考 有 很 多 途径 ,有 一 点 就 是 不 要 墨守成规 ,以 下 是 一 些 网 站 规划 设计 方面 的 技巧 : 

1. 要 养 成 构图 的 良好 习惯 

在 动手 制作 任何 作品 之 前 ,都 需要 先进 行 构图 。 构 图 是 指 在 创作 过 程 中 ,如 何在 有 限 的 
平面 空间 里 ,合理 地 安排 所 看 到 的 画面 上 的 各 个 元 素 的 位 置 ,从 而 达到 最 佳 的 艺术 效果 , 同 
时 表现 出 设计 者 的 意图 。 一 个 优秀 的 设计 ,人 们 往往 以 “匠心 独 运 ” 来 评价 其 构图 的 精湛 。 
可 见 平 面 设计 离 不 开 构 图 。 一 个 好 的 设计 ,首先 要 精心 设计 整体 画面 ,包括 线条 、 各 种 形状 、 
前 景 背景 的 搭配 及 其 他 元 素 安排 ,比如 线条 可 以 引导 观众 的 视线 ,而 不 同 线条 所 代表 的 含义 
也 不 尽 相 同 ,合理 运用 ,可 以 让 观众 更 容易 理解 设计 中 的 主体 及 所 要 表达 的 含义 。 

2. 要 善于 将 多 软件 系统 地 工作 

设计 的 时 候 有 多 个 不 错 的 软件 ,Photoshop 有 强大 的 图 像 处 理 功能 ,但 文字 排版 功能 较 
弱 ;Coreldraw 的 处 理 图 形 绘制 功能 相当 灵活 ,也 有 强大 的 文字 排版 功能 ;Flash 是 著名 的 
动画 处 理 软件 ;Dreamweaver 则 在 网 页 编辑 方面 较 强 等 。 还 有 很 多 其 他 优秀 的 设计 软件 ， 
因此 ,如 果 将 各 个 软件 的 优势 互补 .取长补短 、 强 强 联合 .分 工 合作 , 定 能 取得 非凡 的 效果 。 
在 使 用 上 ,各 个 软件 并 不 一 定 需要 严格 遵循 什么 次 序 , 只 要 方便 ,只 要 能 提高 设计 的 效率 和 
效果 ,如 何 去 使 用 ,都 不 重要 。 

一 些 具体 的 创意 技巧 

CD 把 设计 对 象 颠 倒 。 

(2) 把 设计 对 象 缩小 。 

(3) 把 颜色 换 一 下 。 

(4) 使 设计 对 象 更 长 。 

(5) 使 设计 对 象 闪 动 。 

(6) 把 设计 对 象 放 进 音乐 片段 中 。 

(7) 结合 文字 音乐 图 画 。 

(8) 使 设计 对 象 重复 。 

(9) 使 设计 对 象 变 成 立体 。 

(10) 设计 一 个 比赛 。 

(11) 设计 一 个 竞猜 游戏 。 

(12) 变更 设计 对 象 的 一 部 分 。 

(13) 分 裂 设 计 对 象 。 

(14) 使 设计 对 象 速度 加 快 。 

(15) 使 设计 对 象 对 称 。 

以 上 是 一 部 分 创意 的 想法 ,鉴赏 创意 设计 是 提升 设计 灵感 与 技巧 的 重要 方法 ,只 要 肯 动 
脑筋 ,每 个 人 都 会 想 出 不 少 好 的 创意 。 


9.3 网 站 功能 设计 


网 站 的 功能 设计 在 网 站 的 建设 当中 起 到 的 作用 是 相当 重要 的 ,是 整个 网 站 策划 中 最 为 
核心 的 一 步 。 设 计 出 新 颖 强大 的 功能 ,对 于 网 站 的 建设 和 推广 营销 来 说 这 是 一 个 关键 的 环 
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节 , 没 有 它 可 以 说 网 站 的 建设 与 推广 举步维艰 。 同 时 网 站 功能 的 多 少 以 及 质量 的 优 劣 反映 
出 一 个 开发 团队 的 实力 ,也 体现 了 一 个 企业 实力 的 强 弱 。 

现在 许多 的 开发 团队 ,在 设计 功能 这 个 环节 上 出 现 的 失误 ,比如 : 网 站 功能 设计 得 较 
多 ,网 站 功能 不 实用 ,又 或 者 网 站 功能 太 少 等 ,给 网 站 推广 和 发 展 带 来 一 定 的 困难 。 

为 了 避免 出 现 这 些 问 题 ,做 网 站 的 功能 设计 时 ,应 该 注意 以 下 几 点 。 

1. 做 好 网 站 开发 项 目 需求 分 析 

一 个 网 站 项 目的 确立 是 建立 在 各 种 各 样 的 需求 上 面 的 ,这 种 需求 往往 来 自 于 客户 的 实 
际 需求 或 者 是 出 于 公司 自身 发 展 的 需要 ,其 中 客户 的 实际 需求 也 就 是 说 这 种 交易 性 质 的 需 
求 占 了 绝 大 部 分 。 面 对 对 网 站 开发 拥有 不 同 知识 层面 的 客户 ,对 用 户 需求 的 理解 程度 ,在 很 
大 程度 上 决定 了 此 类 网 站 开发 项 目的 成 败 。 因 此 如 何 更 好 地 的 了 解 、 分 析 、 明 确 用 户 需 求 ， 
并 且 能 够 准确 ,清晰 以 文档 的 形式 表达 给 参与 项 目 开 发 的 每 个 成 员 ,保证 开发 过 程 按照 满足 
用 户 需 求 为 目的 正确 项 目 开发 方向 进行 ,是 每 个 网 站 开发 项 目 管理 者 需要 面 对 的 问题 。 下 
面 是 一 些 值得 注意 的 地 方 : 

(1) 需求 分 析 活 动 参与 人 

需求 分 析 活 动 其 实 本 来 就 是 一 个 和 客户 交流 ,正确 引导 客户 能 够 将 自己 的 实际 需求 用 
较为 适当 的 技术 语言 进行 表达 (或 者 由 相关 技术 人 员 帮 助 表达 ) 以 明确 项 目 目 的 的 过 程 。 这 
个 过 程 中 也 同时 包含 了 对 要 建立 的 网 站 基本 功能 和 模块 的 确立 和 策划 活动 。 相 关 开 发 人 
员 美术 和 技术 骨干 代表 或 者 全 部 成 员 、 网 站 用 户 应 一 起 进行 需求 分 析 活 动 。 在 这 个 活动 过 
程 中 ,共同 参与 讨论 和 修改 并 最 终 完成 产品 的 功能 描述 说 明 书 , 并 在 确定 后 签字 ,确保 以 后 
开发 出 来 的 软件 是 用 户 所 需要 的 软件 ,而 且 有 最 终 签字 确认 ,以 免 重 复 改动 而 增加 工作 量 。 

(2) 完整 的 需求 调查 文档 记录 体系 

在 整个 需求 分 析 的 过 程 中 ,按照 一 定 规范 的 编写 需求 分 析 的 相关 文档 是 非常 重要 的 ,不 
但 可 以 帮助 项 目 成 员 将 需求 分 析 结 果 变 得 更 加 详细 和 明确 ,也 为 以 后 的 开发 过 程 做 到 现实 
文本 形式 的 备 忘 ,并 且 有 助 于 为 公司 日 后 的 开发 项 目 提供 有 益 的 借鉴 和 规范 ,需求 分 析 文档 
将 成 为 公司 在 项 目 开 发 中 积累 的 符合 自身 特点 的 经 验 和 财富 。 需 求 分 析 中 需要 编写 的 文档 
主要 是 《网 站 需求 分 析 规 格 说 明 书 》, 它 是 整个 需求 分 析 活动 的 结果 性 文档 ,也 是 开发 工程 中 
项 目 成 员 主 要 的 参考 文档 。 其 主要 内 容 应 该 包括 以 下 几 点 : 首先 是 引言 ,内 容 有 编写 需求 
规格 说 明 书 的 目的 、 项 目 背 景 (软件 产品 的 作用 范围 ) 参考 资料 等 ;然后 是 软件 产品 的 一 般 
性 描述 ,包括 有 运行 环境 与 资源 、 软 件 产品 的 功能 等 ;接着 是 功能 行为 需求 ,包括 了 业务 需求 
功能 模型 (用 例 模型 ) 、 对 象 类 模型 和 相关 类 的 展开 ;再 有 是 性 能 需求 ,应 该 还 有 数据 精确 度 、 
时 间 特 性 、 适 应 性 和 故障 处 理 等 的 说 明 ; 还 有 运行 需求 , 指 的 是 用 户 界面 .硬件 环境 和 软件 环 
境 的 要 求 ; 最 后 是 其 他 要 求 与 附录 等 。 

2. 网 站 功能 的 可 用 性 

网 站 每 推出 一 个 新 的 功能 起 初 都 会 引起 人 们 浓厚 的 兴趣 。 设 计 出 来 的 新 功能 如 果 是 一 
个 全 新 的 功能 ,用 户 就 要 花 时 间 来 适应 这 项 功能 。 如 果 这 个 新 功能 确实 是 用 户 迫 切 需 要 的 ， 
那么 用 户 从 原来 的 使 用 习惯 过 渡 到 这 个 新 功能 上 并 不 困难 。 如 果 设计 出 的 网 站 看 起 来 很 强 
大 ,而 实际 用 起 来 很 烦琐 的 话 , 当 用 户 在 使 用 过 程 中 遇 到 较 多 麻烦 时 ,就 不 会 有 耐心 去 学 习 
和 摸索 你 的 新 功能 了 .接着 他 们 便 不 再 到 访 贵 站 了 .因此 再 漂亮 再 强大 的 功能 也 会 无 人 问 
津 。 这 样 的 实用 性 低 的 功能 设计 对 网 站 没有 太 多 好 处 。 一 个 功能 的 增加 或 者 更 新 需要 一 个 
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循序 渐进 的 过 程 ,所 以 网 站 在 设计 开发 新 功能 或 是 网 站 改版 时 ,要 尽量 简单 化 ,要 让 用 户 感 
觉 不 到 变化 ,但 实际 上 你 已 经 在 悄悄 地 转变 。 

3. 网 站 功能 的 实用 性 

如 果 一 个 网 站 的 功能 设计 简陋 而 稀少 ,将 无 法 吸引 住 用 户 。 那 么 是 不 是 说 一 个 网 站 的 
功能 越 多 越 好 呢 ? 

我 们 说 网 站 拥有 丰富 的 功能 证 明了 网 站 的 强大 ,但 强大 的 基础 是 不 影响 整个 网 站 的 专 
业 形象 和 核心 形象 。 并 不 是 网 站 功能 越 多 越 好 ,不 可 用 ,或 者 复杂 的 功能 设计 只 会 成 为 影响 
网 站 整体 形象 的 拖 油 瓶 。 

我 认为 实用 性 与 可 用 性 是 有 区 别 的 。 许 多 的 功能 都 是 具有 可 用 性 的 ,但 可 用 性 不 代表 
对 整个 网 站 具有 实用 性 。 实 用 人 性 的 功能 是 指 对 于 用 户 使 用 该 网 站 有 实质 性 意义 的 功能 ,是 
为 网 站 的 核心 思想 服务 的 功能 。 那 些 滥 竿 充 数 的 功能 拿 来 又 有 什么 意义 呢 ? 功能 是 为 了 网 
站 运营 的 需要 ,如 果 网 站 的 功能 与 网 站 核心 服务 之 间 没 有 多 大 关系 ,即使 这 样 的 功能 获得 了 
较 多 的 使 用 者 ,并 为 网 站 带 来 了 一 定 的 流量 ,而 对 于 网 站 的 总 体 经 营 意义 也 不 是 很 大 。 

4. 网 站 功能 的 可 扩展 性 

网 站 的 生存 离 不 开 网 站 的 发 展 。 若 是 在 设计 网 站 功能 的 时 候 给 它 套 好 了 条 条 框框 ,就 
只 会 阻碍 网 站 的 发 展 。 在 设计 的 时 候 为 其 发 展 留 下 可 扩展 的 空间 ,根据 市 场 的 变化 需求 寻 
求 功 能 的 不 断 强 大 和 完善 。 具 有 良好 可 扩展 性 的 网 站 其 性 能 随 着 成 本 的 增加 而 线性 的 增 
长 ,并 且 很 容易 对 其 进行 精简 或 者 扩充 。 因 此 网 站 的 可 扩展 性 是 网 站 发 展 的 一 个 重要 要 素 。 


9.4 网 站 设计 流程 


制作 网 站 前 都 必须 先 设计 一 个 网 站 建设 流程 ,然后 按照 网 站 建设 流程 制作 网 站 ,这样 才 
不 至 于 在 制作 过 程 中 迷茫 。 一 般 来 说 ,网 站 建设 的 流程 是 : 网 站 需求 分 析 ; 网 站 整体 规划 ; 
手机 资料 与 素材 ;网 页 制作 ;网 站 的 上 传 与 维护 ;网 站 的 推广 。 


9.4.1 网 站 需求 分 析 


一 个 网 站 项 目的 确立 是 建立 在 各 种 各 样 的 需求 的 基础 上 的 ,这 种 需求 往往 来 自 客户 的 
实际 需求 或 者 出 于 公司 自身 发 展 的 需要 ,其 中 客户 的 实际 需求 即 交 易 性 质 的 需求 占 绝 大 部 
分 。 需 求 分 析 活动 就 是 与 客户 交流 的 过 程 , 期 间 要 正确 引导 客户 能 够 将 其 实际 需求 用 较为 
适当 的 技术 语言 表达 以 明确 目的 。 这 个 过 程 也 包含 对 建立 网 站 的 基本 功能 和 模块 的 确定 。 
在 整个 需求 分 析 的 过 程 中 ,需要 按照 一 定 的 规范 编写 需求 分 析 的 相关 文档 ,可 以 帮助 项 目 成 
员 将 需求 分 析 的 结果 更 加 明确 化 。 在 需求 分 析 工 程 中 ,往往 有 很 多 不 明确 的 用 户 需求 ,这 时 
需要 调查 用 户 的 实际 情况 ,明确 用 户 需求 。 通 过 市 场 调研 活动 ,清晰 地 分 析 相 似 网 站 的 性 能 
和 和 运行 情况 ,一 边 更 加 清楚 地 构想 将 要 开发 的 网 站 的 大 体 架构 和 模样 ,在 总 结 同类 网 站 优势 
和 缺点 的 同时 可 以 博采众长 开发 出 更 加 优秀 的 网 站 。 需 求 分 析 说 明 书 应 该 包含 以 下 几 点 : 

正确 性 : 每 个 功能 必须 清楚 描写 交付 的 功能 。 

可 行 性 : 确保 在 当前 的 开发 能 力 和 系统 环境 下 可 以 实现 每 个 需求 。 
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必要 性 : 功能 是 否 必须 交付 ,是 否 可 以 推迟 实现 ,是 否 可 以 在 消减 开支 的 情况 发 生 时 
去 除 。 
简明 性 : 不 要 使 用 专业 的 网 络 术语 。 
检测 性 : 如 果 开 发 完毕 ,客户 可 以 根据 需求 检测 。 


9.4.2 网 站 规划 


在 做 网 站 之 前 首先 要 准确 定位 ,明确 建站 目的 是 第 一 步 要 做 的 。 给 网 站 定位 时 ,要 与 公 
司 决策 层 共同 讨论 ,一边 让 上 层 领导 能 对 网 站 的 发 展 方向 有 一 定 的 把 握 , 同 时 最 好 调动 公司 
其 他 部 门 一 起 参与 讨论 ,让 其 及 时 从 公司 立场 提出 好 的 建议 ,一 边 结 合 到 策划 中 去 。 在 明确 
建站 目的 和 网 站 定位 以 后 ,开始 收集 相关 的 意见 ,包括 公司 其 他 部 门 的 意见 。 因 为 网 站 一 定 
要 为 公司 服务 ,收集 其 他 部 门 的 意见 和 想法 是 必要 的 ,需要 把 建议 整理 成 文档 。 

根据 意见 以 及 公司 业务 的 侧重 点 ,并 结合 网 站 定位 来 确定 网 站 的 栏目 。 这 是 一 个 讨论 的 
过 程 ,需要 将 相关 人 员 定 下 来 的 内 容 归 类 ,形成 网 站 栏目 的 树 状 列表 以 清晰 表达 站 点 结构 。 

1. 功能 定位 

设计 是 一 种 审美 活动 ,成功 的 设计 作品 一 般 都 很 艺术 化 。 但 艺术 只 是 设计 的 手段 ,而 非 
设计 的 任务 。 设 计 的 任务 是 要 实现 设计 者 的 意图 ,而 并 非 创造 美 。 

网 页 设计 的 任务 ,是 指 设计 者 要 表现 的 主题 和 要 实现 的 功能 。 站 点 的 性 质 不 同 ,设计 的 
任务 也 不 同 。 从 形式 上 ,可 以 将 站 点 分 为 以 下 三 类 。 

第 一 类 是 资讯 站 点 , 像 新 浪 、 网 易 和 搜狐 等 门户 网 站 。 这 类 站 点 将 为 访问 者 提供 大 量 的 
信息 ,而 且 访 问 量 较 大 。 因 此 需 注 意 页 面 的 分 割 结构 的 合理 、 页 面 的 优化 以 及 界面 的 亲 和 
等 问题 。 

第 二 类 是 资讯 和 形象 相 结合 的 网 站 , 像 一 些 较 大 的 公司 、 国 内 高 校 的 网 站 等 。 这 类 网 站 
在 设计 上 要 求 较 高 , 既 要 保证 资讯 类 网 站 的 上 述 要 求 ,同时 又 要 突出 企业 ,单位 的 形象 。 然 
而 从 现状 上 来 看 ,这 类 网 站 有 粗制滥造 的 嫌疑 。 

第 三 类 则 是 形象 类 网 站 ,比如 一 些 中 小 型 的 公司 或 单位 的 网 站 。 这 类 网 站 一 般 较 小 ,有 
的 只 有 几 页 ,需要 实现 的 功能 也 较为 简单 ,网 站 设计 的 主要 任务 是 突出 企业 形象 。 这 类 网 站 
对 设计 者 的 美工 水 平 要求 较 高 。 

当然 这 只 是 从 整体 上 来 看 ,具体 情况 还 要 具体 分 析 。 不 同 的 站 点 还 要 区 别 对 待 , 对 网 站 
进行 总 体 设计 。 

2. 网 站 的 总 体 设 计 

在 完成 需求 分 析 和 网 站 的 功能 定位 后 ,开始 对 项 目 进行 总 体 设计 ,出 一 份 网 站 建设 方案 
给 客户 。 主 要 确定 以 下 功能 : 

。 网 站 需要 实现 哪些 功能 。 设 计 网 站 功能 结构 .网 站 功能 系统 通常 由 许多 个 模块 组 

成 ,每 个 模块 完成 一 个 适当 的 子 功能 。 应 该 把 模块 组 织 成 良好 的 层次 系统 ,网 站 功 
能 结构 可 以 用 层次 图 或 机 构图 来 描述 。 网 站 的 技术 解决 方案 ,包括 采用 的 服务 器 类 
型 ;所 选择 的 操作 系统 并 分 析 投 入 的 成 本 、 功 能 、 开 发、 稳定 性 和 安全 性 等 ;采用 系统 
性 的 解决 方案 、 电 子 商 务 解决 方案 还 是 另行 开发 ;网 站 安全 性 措施 , 防 黑 客 、 防 病毒 
方案 ;网 站 开发 使 用 的 软件 和 开发 的 硬件 环境 等 。 
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° 确定 开发 人 数 和 开发 时 间 。 
。 需 要 遵循 的 规则 和 标准 。 书 写 文档 ,使 用 正规 文档 记录 总 体 设计 的 结果 ,主要 包括 
系统 说 明 、 用 户 手 册 、 测 试 计划 详细 的 实现 计划 等 。 

。 审 查 和 复审 。 

3. 网 站 的 详细 设计 

总 体 设计 阶段 以 比较 抽象 概括 的 方式 提出 了 解决 问题 的 办 法 。 详 细 设 计 阶段 的 任务 就 
是 把 解法 具体 化 。 详 细 设计 主要 是 针对 程序 开发 部 分 来 说 的 。 但 这 个 阶段 不 是 真正 编写 程 
FF ,而 是 设计 出 程序 的 详细 规格 说 明 。 这 种 规格 说 明 的 作用 类 似 于 其 他 工程 领域 中 工程 师 
经 常 使 用 的 工程 蓝图 ,它们 应 该 包含 必要 的 细节 ,例如 程序 界面 .表单 和 需要 的 数据 等 。 


9.4.3 项目 实施 


1. 整体 形象 设计 

在 设计 员 进 行 详细 设计 的 同时 ,网 页 设计 师 开 始 设 计 网 站 的 整体 形象 和 首页 。 整 体形 
象 设计 包括 网 站 名 称 、 网 站 页 面 布局 ,标准 字 、Logo 标准 色彩 和 广告 语 等 。 

(1) 确定 网 站 名 称 

如 果 题 材 已 经 确定 ,就 可 以 围绕 题材 给 该 网 站 起 一 个 名 字 。 网 站 名 称 也 是 网 站 设计 的 
关键 要 素 。 网 站 名 称 要 正 、 要 简单 易 记 ,有 利于 对 网 站 的 形象 进行 宣传 推广 。 

名 称 要 正 : 就 是 要 合法 、 合 情 和 合理 。 不 能 用 带 有 反动 的 ` 色 情 的 、 保 密 性 的 和 危害 社 
会 安全 的 名 词语 句 。 

名 称 要 易 记 : 网 站 名 称 的 字数 应 该 控制 在 6 个 字 以 内 ,4 个 字 的 也 可 以 用 成 语 。 字 数 少 
方便 与 其 他 站 点 进行 链接 。 

名 称 要 有 特色 : 名 称 如 果 能 体现 一 定 的 内 涵 , 给 浏览 者 更 多 的 视觉 冲击 和 空间 想象 力 ， 
就 是 好 的 名 称 。 

(2) 确定 网 站 页 面 布局 

比如 某 “ 厂 ” 字 型 结构 布局 的 企业 网 站 ,这 种 布局 页 面 项 部 为 “标志 十 广告 条 ”, 下 方 左面 
为 主 菜 单 ,右面 显示 正文 信息 ,整体 效果 类 似 * 厂 ” 字 , 所 以 称 为 “ 厂 ” 字 型 布局 。 这 是 网 页 设 
计 中 使 用 范围 较 广 的 一 种 布局 方式 ,一 般 应 用 于 企业 网 中 的 二 级 页 面 。 这 种 布局 的 优点 是 
页 面 结构 清晰 、. 主 次 分 明 ,是 初学 者 最 容易 上 手 的 布局 方法 。 布 局 网 页 版 面 时 可 以 采用 以 下 
几 种 方式 。 

正常 平衡 : 也 称 “匀称 ”, 多 指 左 右 、 上 下 对 照 形式 ,主要 强调 秩序 ,能 达到 安定 诚实 、 值 
得 信赖 的 效果 。 

异常 平衡 : 即 非 对 照 形 式 , 但 也 要 平衡 和 韵律 ,当然 都 是 不 均衡 的 。 此 种 布局 能 达到 强 
调 性 ,不 安 性 、 高 注目 性 的 效果 。 

对 比 : 对 比 不 仅 利用 色彩 、 色 调 等 技巧 表现 ,在 内 容 上 也 可 设计 上 古 与 今 新 与 旧 等 对 比 。 

凝视 : 是 指 利用 页 面 中 人 物 的 实现 引导 浏览 者 仿照 跟随 ,以 达到 注释 页 面 的 效果 。 一 
般 多 用 明星 凝视 状 。 

ZA: 空白 有 两 种 作用 。 一 方面 相对 其 他 网 站 表示 突出 、 卓 越 ; 另 一 方面 也 表现 网 站 品 
味 的 优越 。 这 种 表现 方法 对 体现 网 站 的 格调 十 分 有 效 。 
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尽量 用 图 片 解说 : 此 法 对 不 能 用 语言 说 明 ,或 用 语言 无 法 表达 的 情感 ,特别 有 效 。 图 片 
解说 的 内 容 可 以 传达 给 浏览 者 更 多 的 感性 认识 。 

(3) 标准 字 

标准 字体 是 指 用 于 标志 ,标题 、 主 菜单 .主体 内容 的 字体 。 它 是 CI 设计 的 又 一 个 方面 。 
标准 字体 也 是 一 整套 的 字体 方案 ,整个 网 站 所 有 页 面 的 设计 也 都 应 该 按照 标准 字体 方案 来 
设计 。 

一 般 , 常 用 的 字体 可 以 自由 设计 ,而 对 于 不 常用 的 字体 最 好 通过 图 片 形式 显示 。 标 准 字 
体 的 设计 中 还 应 考虑 中 英文 及 其 他 可 能 用 到 的 文字 所 使 用 的 不 同 字体 。 

2. 开发 制作 

到 这 里 ,网 页 界面 设计 和 程序 的 功能 开发 将 同时 进入 开发 阶段 ,需要 提醒 的 是 ,测试 人 
员 需 要 随时 测试 网 页 与 程序 ,记录 测 时 所 遇 到 的 问题 和 解决 方法 ,不 要 拖 到 项 目 完成 后 再 测 
试 ,这 样 会 浪费 大 量 的 时 间 和 精力 。 项 目 经 理 需 要 经 常 了 解 项 目 进度 ,协调 和 沟通 整个 开发 
TE: 

3. 测试 与 调试 

在 网 站 初步 完成 后 ,上 载 到 服务 器 ,对 网 站 进行 全 范围 的 测试 ,包括 速度 .兼容 性 、 交 互 
性 ,链接 正确 性 ,程序 健壮 性 和 压力 测试 等 ,发 现 问题 后 马上 解决 并 作 好 相关 记录 。 


9.4.4 宣传 推广 


推广 网 站 的 目的 是 提高 网 站 访问 量 并 达成 网 络 营销 的 目标 。 网 站 的 经 营 者 应 该 利用 互 
联网 的 特性 和 自己 对 目标 市 场 的 准确 定位 ,让 更 多 的 潜在 客户 认识 企业 的 网 站 并 成 为 回 
头 客 。 

1. 精心 设计 网 站 域名 

宣传 站 点 最 重要 的 一 步 就 是 注册 一 个 好 记 的 域名 。 大 家 可 能 都 有 这 样 的 切身 体会 : 在 
大 家 生活 的 城市 里 ,到 处 都 有 . com 的 广告 ,有 些 看 一 眼 就 记 住 ,有 些 则 不 然 。 当 然 ,它们 的 
广告 效应 也 会 有 差别 。 

从 技术 上 讲 , 域 名 只 是 一 种 Internet 中 用 于 解决 网 站 地 址 问题 的 方法 。 可 以 说 只 是 一 
个 技术 名 词 。 但 是 ,由 于 Internet 已 经 成 为 了 全 世界 人 的 Internet, 域 名 也 自然 地 成 为 了 一 
个 社会 科学 名 词 。 从 社会 科学 的 角度 看 ,域名 已 成 为 了 Internet 文化 的 组 成 部 分 。 从 商界 
看 ,域名 已 被 誉 为 “企业 的 网 上 商标 ”。 没 有 哪 一 家 企业 不 重视 自己 产品 的 标识 一 一 商标 ,而 
域名 的 重要 性 及 其 价值 ,也 已 经 被 全 世界 的 企业 所 重视 。 

域名 名 称 一 般 由 26 个 英文 字母 .10 个 阿拉 伯 数 字 以 及 下 划 线 “_” 组 成 。 对 于 公司 站 点 
来 说 ,把 公司 的 名 称 注册 为 域名 是 一 个 较 好 的 选择 。 这 样 让 用 户 在 记 住 公司 名 称 的 同时 ,也 
记 住 了 公司 站 点 的 域名 。 这 是 业界 一 条 不 成 文 的 做 法 ,也 是 非常 行 之 有 效 的 方法 。 

2. 使 用 搜索 引擎 推广 

现在 网 络 在 国内 已 经 基本 上 普及 ,浏览 者 主要 是 通过 什么 方式 在 网 上 寻找 自己 所 要 找 
的 东西 呢 ? 大 部 分 使 用 者 都 是 登录 有 名 的 搜索 引擎 ,输入 相关 的 搜索 内 容 , 就 可 以 快速 找到 
相关 的 信息 。 所 以 企业 网 站 的 推广 ,首选 登录 被 大 家 公认 的 搜索 引擎 网 站 或 者 是 专业 的 相 
关 网 站 。 
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注册 到 搜索 引擎 ,是 极为 方便 的 一 种 宣传 网 站 的 方法 。 目 前 比较 有 名 的 搜索 引擎 有 谷 
WK (www. google. cn) Я (муу. baidu. com)、 雅 虎 (http://cn. yahoo. com), W% (www. 
163. сот) 5$, 

注册 时 尽量 详尽 地 填写 企业 网 站 中 的 一 些 信息 ,特别 是 一 些 关键 词 要 尽量 写 得 普遍 化 、 
大 众 化 一 些 , 比 如 “公司 资料 "最 好 写成 “公司 简介 ”。 注 册 分 类 的 时 候 尽量 分 得 细 一 些 , 比 如 
有 些 企 业 网 站 只 在 “公司 ”一 大 类 里 注册 了 ,人 们 只 有 查找 “公司 ”时 才能 搜索 到 该 网 站 。 但 
一 般 情况 下 ,一 个 客户 要 查找 的 是 某 个 公司 所 生产 的 产品 ,如 果 只 注册 了 “公司 ”大 类 ,用 户 
不 会 知道 公司 生产 的 是 什么 产品 。 在 进行 推广 型 登录 时 ,要 注意 关键 字 的 出 现 位 置 关键 字 
的 出 现 频率 和 关键 字 的 匹配 程度 ,以 提高 网 站 的 登录 效果 。 

企业 网 站 最 快 最 直接 的 宣传 方法 就 是 通过 一 些 知名 搜索 引擎 网 站 的 帮助 进行 推广 , 企 
业 可 以 根据 自己 企业 的 经 营 范围 ,产品 的 推广 方向 选择 投放 广告 。 下 面 介 绍 一 下 目前 国内 
外 著名 的 各 类 搜索 引擎 。 

(1) 中 文 搜索 引擎 

中 文 搜索 引擎 是 国内 企业 推广 网 站 的 首选 ,至 今 著名 的 中 文 搜索 引擎 也 是 屈指 可 数 。 
他 们 各 有 各 的 优势 ,企业 可 以 根据 他 们 的 知名 度 和 优势 进行 选择 。 

谷歌 (Google, 图 9-59), 它 是 目前 最 优秀 的 支持 多 语种 的 搜索 引擎 之 一 。 它 提供 了 网 
站 、 图 像 、 新 闻 组 等 多 种 资源 的 查询 ,并 包括 中 文 简体 、 中 文 繁体 、 英 语 等 35 个 国家 和 地 区 的 
语言 资源 。 
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图 9-59 


百度 (baidu, 图 9-60), 它 是 全 球 最 大 的 中 文 搜索 引擎 ,提供 了 网 页 快照 、 网 页 预览 相关 
搜索 词 .错别字 纠正 提示 、 新 闻 搜 索 、flash 搜索 、 信 息 快递 搜索 、 百 度 搜 霸 、 搜 索 援助 中 心 等 
功能 。 

(2) 英文 搜索 引擎 

雅虎 (Yahoo) ,有 英 、 中 日 、 韩 \ 法 、 德 . 意 、 西 班 牙 等 10 余 种 语言 版 本 ,各 版 本 内 容 互 不 
相同 。 它 提供 了 类 目 、 网 站 及 全 文 检索 功能 。 其 目录 分 类 比较 合理 ,层次 深 ,类 目 设置 好 ,网 
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站 提要 严格 清楚 ,但 部 分 网 站 无 提要 。 网 站 收录 丰富 ,检索 结果 精确 度 较 高 ,有 相关 网 页 和 
新 闻 的 查询 链接 。 全 文 检 索 有 高 级 检索 方式 ,未 成 年 保护 ,支持 迎 辑 查询 ,可 限时 间 查 询 。 
此 外 ,还 设 有 新 站 、 酷 站 目录 功能 ,如 图 9-61 所 示 。 
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图 9-61 


Aol( http://www. aol. com) 提 供 了 类 目 检 索 、 网 站 检索 、 白 页 (人 名 ) 查 询 、 黄 页 查 
询 、 工 作 查 询 等 多 种 功能 。 其 目录 分 类 细致 ,网 站 收录 丰富 ,搜索 结果 有 网 站 提要 , 按 
照 精确 度 排序 ,方便 用 户 得 到 所 需 结果 ;支持 布尔 操作 符 ,包括 and, or, and not, adj 以 
及 near 等 ;有 高 级 检索 功能 ,其 中 有 一 些 选项 可 针对 用 户 要 求 在 相应 范围 内 进行 检索 ， 
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如 图 9-62 所 示 。 
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图 9-62 


3. 网 络 广告 

网 络 广告 是 一 种 常用 的 网 站 推广 手段 ,是 利用 超 文本 链接 功能 而 实现 的 一 种 宣传 方式 ， 
常见 的 网 络 广告 有 标志 广告 (Banner) 文本 广告 .电子 邮件 广告 .分 类 广告 等 多 种 形式 ,其 中 
标志 广告 又 是 最 通用 的 ,因此 有 时 也 将 网 络 广告 等 同 于 标志 广告 。 标 志 广 告 通 常 以 GIF. 
JPG, SWF (flash 动画 ) 等 格式 建立 文件 ,插入 在 网 页 中 来 表现 广告 内 容 , 同 时 还 应 用 Java 等 
语言 使 其 产生 交互 性 ,用 户 单 击 标志 广告 后 通过 超级 链接 到 达 广 告 所 要 宣传 的 内 容 页 面 。 
据 统计 ,标志 广告 的 平均 单 击 率 在 1% 左 右 。 与 传统 媒体 相 比 ,网 络 广告 有 着 独特 之 处 ,如 
成 本 低廉 ,不 受 地 理 区 域 限制 .具有 交互 性 ,广告 效 果 容 易 统 计 、 具 有 实时 性 和 用 户主 动 

(1) 交换 链接 和 广告 

这 是 一 种 免费 获得 宣传 的 推广 途径 ,主要 是 指 两 个 网 站 间 的 相互 补充 、 相 互 推广 而 形成 
的 推广 方式 。 

。 交换 友情 链接 

交换 友情 链接 (也 成 为 互惠 链接 ) 是 通过 增加 网 站 推广 机 会 从 而 提高 访问 量 的 一 种 有 效 
方式 ,而 且 交 换 链接 数量 的 多 少 也 是 搜索 引擎 决定 网 站 排名 的 一 项 参数 。 因 此 交换 链接 被 
认为 是 网 络 营销 的 一 项 重要 手段 ,也 是 评价 网 络 营 销 效果 的 一 项 标准 。 

实现 交换 链接 的 方法 是 寻找 与 自己 的 网 站 具有 互补 性 、 相 关 性 或 者 潜在 客户 的 站 点 ,并 
向 它们 提出 与 站 点 进行 交互 链接 的 要 求 ,在 企业 的 网 上 为 伙伴 站 点 设立 链接 。 通 常 有 图 片 
链接 及 文本 链接 两 种 形式 ,由 于 文本 链接 占用 字 节 少 且 不 影响 网 页 整体 效果 而 被 广泛 采用 。 
互惠 链接 还 可 以 增加 企业 网 站 的 知名 度 。 一 个 网 站 不 可 能 大 而 全 ,但 为 了 给 用 户 提供 “ 完 
整 ”的 方案 ,解决 的 一 个 办 法 就 是 建立 互惠 链接 .这 也 是 被 业界 证 明 的 ,网 站 应 该 有 自己 的 特 
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色 和 自己 的 核心 业务 。 

在 选择 链接 对 象 时 应 该 有 一 定 的 标准 ,因为 建立 友情 链接 不 仅仅 是 为 了 增加 访问 量 , 还 
应 对 你 的 网 站 内 容 起 补充 作用 ,以 便 更 好 地 服务 你 的 用 户 。 如 果 链 接 了 大 量 低 水 平 的 网 站 ， 
会 降低 访问 者 对 网 站 的 信任 ,甚至 失去 了 潜在 顾客 。 

。 交换 友情 广告 

交换 友情 广告 是 网 络 广告 的 一 种 ,一 般 是 免费 的 。 交 换 广告 与 交换 链接 有 许多 相似 之 
处 ,都 是 出 于 平等 互惠 的 目的 ,为 增加 访问 量 而 使 用 的 一 种 推广 手段 ,其 主要 区 别 在 于 它 交 
换 的 是 标志 广告 (也 有 文本 广告 ) 而 不 是 各 自 网 站 的 Logo 或 名 称 。 而 且 , 通 常 是 加 入 专业 
的 广告 交换 网 才能 与 其 他 成 员 建 立交 换 广告 ,而 不 是 自行 寻找 相关 的 网 站 直接 交换 双方 的 
标志 广告 。 此 外 ,广告 投放 和 显示 次 数 也 是 由 广告 交换 网 决定 的 , 当 在 网 站 上 显示 广告 网 成 
员 的 广告 时 ,企业 自身 的 广告 同时 显示 在 交换 广告 网 其 他 成 员 的 网 站 上 。 互 惠 链接 可 以 放 
置 在 网 站 的 子 目录 或 其 他 任何 位 置 , 当 用 户 浏览 完 网 站 之 后 再 跳 到 其 他 网 站 ;而 免费 广告 交 
换 网 则 不 是 ,一 般 地 ,免费 广告 交换 网 要 求 在 网 站 首页 放置 Banner 广告 ,而 不 是 网 站 内 部 。 

在 众多 的 广告 交换 组 织 中 ,网 盟 (http://www. Webunion. com) 是 首 家 也 是 最 具 规模 
与 专业 性 的 中 文 标志 广告 交换 服务 网 ,全 球 有 上 万 家 中 文 网 站 加 入 网 盟 。 网 盟 的 免费 广告 
交换 服务 可 以 轻易 地 与 成 千 上 万 个 中 文 网 页 进行 交换 广告 显示 ,在 网 页 上 显示 其 他 会 员 的 
广告 次 数 越 多 ,本 企业 的 广告 显示 在 其 他 网 站 的 次 数 也 越 多 (网 盟 采 取 2 : 1 的 交换 比例 , 即 
在 企业 的 网 站 上 显示 两 次 广告 ,可 以 获得 一 次 广告 显示 机 会 )。 加 入 网 盟 的 方法 也 很 简单 , 
只 要 网 站 有 一 定 的 质量 ,直接 到 网 盟 网 站 在 线 申请 会 员 资格 即 可 ,经 网 盟 确 认 后 ,只 需 在 网 
页 中 加 入 网 盟 制 定 的 HTML 代码 ,网 盟 各 会 员 的 网 页 广告 就 会 出 现在 自己 网 站 的 网 页 上 ， 
本 企业 的 广告 也 会 出 现在 会 员 的 网 页 上 。 

另外 ,也 可 以 跟 一 些 兄弟 公司 或 者 朋友 公司 交换 友情 链接 。 当 然 兄弟 公司 网 站 最 好 是 
点 击 率 比较 高 的 。 友 情 链接 包括 文字 链接 和 图 片 链接 。 文 字 链 接 一 般 就 是 公司 的 名 字 ; 图 
片 链接 则 包括 Logo 的 链接 和 Banner 的 链接 。Logo 和 Banner 的 制作 跟 上 面 的 广告 条 一 
样 , 也 需要 仔细 考虑 怎么 样 去 吸引 客户 单 击 。 如 果 人 允许 应 尽量 使 用 图 片 链接 ,可 将 图 片 做 成 
GIF 或 者 Flash 动画 。 

(2) 充分 利用 信息 网 和 分 类 广告 

有 资料 表明 ,网 上 读者 对 互联 网 上 的 重大 新 闻 与 分 类 广告 的 兴趣 不 相 上 下 ,因此 ,充分 
利用 信息 网 和 分 类 广告 的 功能 ,有 助 于 网 站 推广 并 增加 成 交 机 会 。 

在 专业 的 信息 网 发 布 信息 和 分 类 广告 类 似 于 无 站 点 网 上 营销 的 方法 ,但 比 无 站 点 营销 
更 具有 优势 。 因 为 分 类 广告 中 往往 只 能 提供 有 线 的 网 页 信息 ,如 果 拥 有 自己 的 网 站 ,只 需 在 
发 布 信息 中 写 明 访问 网 址 ,有 兴趣 的 访问 者 就 会 根据 网 址 来 访问 网 站 ,从 而 在 网 站 上 获得 更 
加 详细 的 信息 。 

另外 ,站 点 属于 某 些 特定 行业 或 组 织 ,而 这 些 行 业 或 组 织 如果 建 有 会 员 站 点 , 则 应 加 入 
这 类 会 员 网 站 ,或 至 少 应 该 在 会 员 网 站 中 申请 一 个 链接 。 

4. 电子 邮件 营销 

这 里 所 指 的 电子 邮件 营销 是 特 指 有 些 网 站 提供 的 邮件 列表 服务 , 它 通 过 客户 自主 订阅 ， 
实现 一 对 一 和 一 对 多 的 电子 邮件 营销 ,不 会 产生 垃圾 邮件 带 来 的 负面 效应 。 当 然 邮 件 组 的 
内 容 编 辑 要 注意 在 个 性 化 服务 .内容 的 多 样 性 和 新 颖 等 方面 多 下 工夫 ,最 好 的 方式 是 让 客户 
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参与 进来 ,让 大 家 都 有 认同 感 。 此 营销 方式 经 费 最 省 ,当然 ,所 起 的 效果 反应 起 来 比较 慢 , 在 
宣传 新 网 站 方面 远 不 及 其 他 推广 方式 来 得 更 快 ,但 会 保持 比较 高 的 回头 率 , 在 粘 住 客户 方面 
是 一 种 较 好 的 举措 。 

据 统计 ,电子 邮件 反馈 率 在 5% ~15% , 远 远 高 于 标志 广告 的 回应 率 。 电 子 邮 件 营 销 已 
经 受到 广泛 重视 ,甚至 许多 B2B 电子 商务 企业 也 在 利用 电子 邮件 营销 手段 。 

电子 邮件 营销 的 基本 思路 是 : 通过 为 顾客 提供 某 些 有 价值 的 信息 ,如 实施 新 闻 、 最 新 产 
品 信 息 、 免 费 报告 以 及 其 他 为 顾客 定制 的 个 性 化 服务 内 容 , 来 吸引 顾客 参与 ,从 而 收集 顾客 
的 电子 邮件 地 址 (邮件 列表 ) ,在 发 送 定 制 信息 的 同时 对 自己 的 网 站 、 产 品 或 服务 进行 宣 
在 企业 没有 条 件 实施 邮件 列表 的 情况 下 ,也 可 以 通过 向 第 三 方 购买 电子 邮件 地 址 .与 第 三 方 
合作 等 方式 开展 电子 邮件 营销 ,或 者 委托 给 专业 的 电子 邮件 营销 服务 公司 。 从 营销 的 手段 、 
提供 服务 的 内 容 和 与 顾客 的 关系 等 方面 综合 分 析 ,E-mail 营销 有 下 列 模 式 : 顾客 关系 E- 
mail el jr B WD ^F e ie it A. .许可 邮件 列表 、 赞 助 新 闻 邮 件 、 赞 助 讨论 列 表 、 鼓 动 性 营销 、 
伙伴 联合 营销 。 

5. 专业 营销 网 站 推广 

利用 行业 或 商业 门户 网 站 ,或 者 是 目标 客户 经 常 浏览 的 网 站 ,投放 网 络 广告 或 做 新 闻 专 
题 类 的 宣传 广告 ,会 产生 意 想不到 的 禾 动 效应 。 虽 然 网 络 营 销 比 传统 营销 具有 多 方面 的 优 
越 性 ,但 并 不 意味 着 网 络 营销 可 以 脱离 或 者 完全 替代 传统 营销 。 事 实 上 ,由 于 互联 网 只 是 人 
们 生活 中 的 一 部 分 内 容 ,而且 大 部 分 人 并 没有 上 网 ,即使 对 于 经 常 上 网 者 来 说 ,也 并 没有 达 
到 只 接受 互联 网 信息 而 忽略 其 他 传统 媒体 信息 的 地 步 , 因 此 ,网 络 营销 只 是 企业 营销 中 的 一 
部 分 ,网 络 营销 只 有 与 传统 营销 相 结合 才能 发 挥 更 大 的 效果 。 

整合 营销 至 少 包含 两 方面 的 含义 : 一 是 网 络 营销 与 传统 营销 的 整合 ;二 是 网 络 营销 各 
种 手段 的 整合 。 

网 络 营销 与 传统 营销 的 整合 , 即 是 利用 传统 营销 的 推广 手段 来 推广 网 上 的 服务 ,例如 在 
报纸 、 杂 志 、 电 视 等 媒体 上 做 广告 ,常见 的 还 有 路 牌 广告 车厢 广告 .宣传 册 、 信 和 淆 广告 .组 织 
研讨 会 等 多 种 形式 。 向 传统 媒体 和 网 络 媒体 发 布 新 闻 也 是 一 种 效果 较 好 的 推广 方式 。 另 
外 ,应 该 在 所 有 公司 文化 用 品 和 展示 场所 的 适当 位 置 印刷 或 显示 出 公司 的 网 址 ,例如 信封 、 
传真 纸 名片 以 及 各 类 广告 中 ;在 参加 各 种 展览 会 或 其 他 活动 时 ,也 应 该 在 醒目 位 置 显示 出 
公司 的 链接 地 址 。 

网 络 营销 各 种 手段 的 整合 告诉 我 们 ,各 种 网 络 营销 手段 之 间 不 是 孤立 的 ,更 不 是 相互 排 
斥 的 。 为 加 强 网 络 营销 的 效果 ,可 以 采取 多 种 手段 齐头并进 的 方式 ,所 有 的 工作 都 与 网 络 营 
销 效果 有 关 , 从 网 站 策划 、 网 页 制作 、 服 务 方式 等 基本 环节 做 起 ,总 目标 都 是 为 了 取得 最 好 的 
宣传 和 推广 效果 。 除 了 上 述 常用 的 网 络 营 销 手 段 之 外 ,还 有 许多 方式 ,如 利用 免费 服务 和 在 
线 竞 猜 增 加 访问 量 ,数据库 营 销 、 会 员 制 营销 \ 病 毒性 营销 等 ,企业 可 以 根据 自己 的 实际 情况 
选择 其 中 的 若干 方法 来 实现 最 佳 的 网 络 营销 效果 。 


9.4.5 网 站 维护 


当 网 站 制作 完成 以 后 ,如 果 不 经 常 改进 或 更 新 ,浏览 者 将 不 愿意 再 去 访问 。 一 个 好 的 网 
站 一 定 要 经 常 进行 更 新 ,才能 使 网 页 内 容 丰 富 。 
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1. 内 容 的 更 新 

网 站 内 容 的 更 新 主要 是 指 及 时 性 信息 需要 及 时 更 新 ,如 企业 新 闻 、 企 业 动态 及 最 新 产品 
等 ,在 企业 网 站 内 容 的 更 新 上 应 主要 注意 如 下 一 些 内 容 的 更 新 。 

(1) 站 内 公告 型 信息 的 更 新 

网 站 的 信息 内 容 应 该 适时 的 更 新 ,如 果 现在 客户 访问 企业 的 网 站 看 到 的 是 企业 去 年 的 
新 闻 或 者 说 客户 在 秋天 看 到 新 春 快 乐 的 网 站 祝贺 语 ,那么 对 企业 的 印象 肯定 大 打折 扣 。 因 
此 适时 更 新 内 容 是 相当 重要 的 。 同 时 在 网 站 栏目 设置 上 ,也 最 好 将 一 些 可 以 定期 更 新 的 栏 
目 如 企业 新 闻 等 放 在 首页 ,使 首页 的 更 新 频率 更 高 些 。 

(2) 网 站 服务 与 回馈 工作 要 跟 上 

企业 应 设 专 人 或 专门 的 岗位 从 事 网 站 的 服务 和 回馈 处 理 。 客 户 向 企业 网 站 提交 的 各 种 
回馈 表单 .购买 的 商品 ,发 到 企业 邮箱 中 的 电子 邮件 ,在 企业 留言 板 上 的 留言 等 ,企业 如 果 没 
有 及 时 处 理 和 跟 进 ,不 但 会 丧失 机 会 ,还 会 造成 很 坏 的 影响 ,以 致 客户 不 会 再 相信 企业 的 
网 站 。 

(3) 不 断 完 善 网 站 系统 ,提供 更 好 的 服务 

企业 初始 创建 网 站 一 般 投 入 较 小 ,功能 也 不 是 很 强 。 随 着 业务 的 发 展 ,网 站 的 功能 也 应 
该 不 断 完善 以 满足 顾客 的 需要 ,此 时 使 用 集成 度 高 的 电子 商务 应 用 系统 可 以 更 好 地 实现 网 
上 业务 的 管理 和 发 展 ,从 而 将 企业 的 电子 商务 带 向 更 高 的 阶段 ,并 将 取得 更 大 的 收获 。 

2. 风格 的 更 新 

更 新 主要 是 指 网 站 文本 内 容 和 一 些小 图 片 的 增加 、 删 除 或 修改 ,而 总 体 版 面 的 风格 保持 
不 变 , 可 以 一 般 一 个 星期 更 新 一 次 。 如 果 公 司 网 站 的 客户 量 多 , 则 周期 可 再 缩短 。 当 然 如 果 
有 精力 的 话 最 好 每 天 更 新 。 这 样 客 户 每 次 访问 网 站 时 都 有 新 内 容 ,促使 他 有 时 间 便 来 看 看 。 
网 站 的 改版 是 对 网 站 总 体 风 格 作 调 整 ,包括 版 面 、 配 色 等 各 方面 。 改 版 后 的 网 站 会 让 客户 感 
觉 改 头 换 面 ,焕然 一 新 。 一 般 一 个 网 站 的 设计 代表 了 公司 的 形象 和 风格 。 随 着 时 间 的 推移 ， 
很 多 客户 对 这 种 形象 已 经 形成 了 定 势 ,如 果 经 常 改版 ,会 让 客户 感觉 不 适应 ,特别 是 那 种 风 
格 彻 底 改 变 的 “改版 "。 当 然 如 果 对 公司 网 站 有 更 好 的 设计 方案 ,可 以 考虑 改版 , 毕 况 长 期 沿 
用 一 种 版 面 的 做 法 会 让 人 感觉 陈旧 、 大 烦 。 

3. 域名 续费 

域名 的 使 用 期 限 一 般 为 一 年 ,所 以 在 使 用 时 要 注意 提前 交付 企业 注册 的 域名 费用 ,如 果 
企业 使 用 的 服务 空间 有 较 大 的 变动 或 者 是 调整 , 则 需要 及 时 对 域名 指向 进行 调整 。 如 果 企 
业 本 身 并 没有 自己 的 服务 器 , 则 需要 对 租用 的 空间 进行 续费 ,不 同 的 空间 根据 功能 \ 流 量 、 连 
接 数 等 分 成 了 不 同 的 价格 。 稳 定 的 空间 和 域名 是 企业 网 站 稳定 运行 的 重要 保证 ,因此 选择 
域名 和 空间 时 要 选择 信誉 好 的 产品 。 

4. 网 站 的 备份 

企业 网 站 使 用 过 程 中 ,被 攻击 的 概率 非常 高 。 黑 客 可 能 来 自 企 业内 部 ,也 可 能 是 企业 的 
竞争 对 手 , 或 者 是 一 个 试 着 玩 的 黑客 ,所 以 制作 好 的 网 站 备份 变 得 非常 关键 。 如 果 长 期 不 对 
网 站 进行 备份 ,那么 万 一 被 黑客 攻击 ,丢失 的 可 能 是 所 有 的 数据 。 对 于 网 站 的 备份 ,方法 有 
很 多 种 ,最 简单 的 就 是 把 上 传 到 服务 器 中 使 用 的 网 站 文件 下 载 到 本 地 硬盘 ,如 有 需要 可 刻录 
成 光盘 。 每 隔 一 周 或 者 一 个 月 操作 一 次 ,这 要 根据 企业 在 网 上 的 信息 量 是 否 大 和 是 否 有 必 
要 这 么 频繁 备份 来 决定 。 
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习题 9 


9-1 
9-2 
9-3 
9-4 


尝试 自己 设计 一 款 Logo。 

简 述 如 何 对 网 站 的 风格 进行 定位 。 
简 述 网 站 的 开发 流程 。 

简 述 网 站 的 推广 方式 。 


cw. LO 


第 10 章 综合 实例 


本 章 知 识 点 
* MiniSite 概念 和 意义 
+ 利用 Photoshop 和 Dreamweaver 设计 网 页 
。 利 用 ASP.NET(CC 井 ) 制 作 简 单 的 资料 收集 功能 
企业 网 站 制作 要 点 
* SQL 数据 库 设计 
。 ASP. NET 模板 的 使 用 
ASP. NET 通用 模块 的 设计 

。 ASP. NET 企业 网 站 设计 实现 

本 章 学 习 目 标 

* 了 和解 什么 是 MiniSite 

° 了 解 企业 网 站 制作 要 点 

。 掌握 系统 需求 分 析 的 步骤 和 方式 

* 掌握 MiniSite 的 版 面 设计 

+ 掌握 企业 网 站 数据 库 的 设计 

。 了 解 动态 网 页 的 基本 设计 

。 掌握 网 页 模版 的 使 用 

。 掌握 基本 的 企业 网 站 功能 设计 

。 掌握 网 页 与 网 站 规划 的 设计 过 程 和 功能 实现 

通过 前 九 章 的 学 习 , 我 们 已 经 掌握 了 制作 网 页 与 网 站 规划 的 基本 知识 ,也 制作 了 不 少 素 
材 和 页 面 。 那 么 ,在 企业 里 面 , 这 些 知 识 都 用 在 什么 地 方 呢 ? 企业 的 网 站 制作 流程 是 怎样 
的 ? 我 们 需要 具体 的 例子 帮助 我 们 更 好 地 提高 网 页 与 网 站 规划 设计 的 技能 。 本 章 安排 了 两 
个 实例 ,一 个 是 利用 Photoshop, Dreamweaver 和 简单 ASP. NET(C # ) 脚 本 完成 的 MiniSite 
的 设计 制作 ,一 个 是 基于 ASP. NET(C + ) 和 SQL Server 完成 企业 网 站 的 设计 ,由 浅 入 深 地 
带领 大 家 掌握 网 页 与 网 站 规划 设计 的 知识 。 


10.1 数码 产品 MiniSite 设计 实例 


MiniSite 这 种 网 站 形式 目前 在 企业 领域 使 用 广泛 , 它 的 时 效 性 强 , 制 作 快 ,更 新 快 ,企业 
需求 量 大 。 本 实例 以 一 个 数码 产品 公司 的 世界 杯 期 间 策 划 的 宣传 活动 为 蓝本 制作 
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MiniSite, 为 增强 实用 性 ,所 用 公司 名 称 、 产 品名 称 和 产品 图 片 均 为 真实 内 容 。 


10.1.1 什么 是 MiniSite 


MiniSite, 单 词 是 由 小 (mini) 和 站 点 (site) 组 合 而 成 的 ,顾名思义 就 是 微型 网 站 或 迷你 站 
点 ,相似 的 名 词 术 语 有 microsite 和 sitelet。 这 名 称 源 自 于 国外 而 被 国内 现代 企业 广泛 使 
用 ,大 多 数 人 直 呼 其 英文 名 。 它 是 企业 为 特定 的 产品 或 业务 专门 设计 的 ,用 于 配合 网 络 推广 
的 网 站 ,页面 少 ,通常 只 有 一 个 简单 的 直接 销售 页 面 (通常 只 有 1 一 2 页 内 容 ) 和 一 个 订购 表 
单 ,没有 标志 广告 ,也 没有 广告 链接 或 者 多 种 产品 选择 ,每 个 MiniSite 只 专注 于 销售 一 种 产 
品 或 服务 ,引导 潜在 顾客 填写 订购 表单 。 访 问 者 一 般 通 过 企业 在 门户 网 站 投放 的 广告 链接 
进入 ,主要 都 是 真正 对 所 提供 产品 有 兴趣 的 目标 用 户 。 

1. MiniSite 的 特点 

(1) 用 户 可 以 在 MiniSite 里 迅速 找到 所 需要 的 信息 ,不 需要 在 大 量 无 关 的 图 片 和 各 种 
链接 中 摸索 ,一 封 简洁 的 产品 介绍 和 订购 单 ,对 于 直接 用 户 来 说 ,简单 明了 ,同时 也 直接 反映 
出 市 场 推 广 与 最 终 销售 的 关系 。 

(2) MiniSite 最 主要 特点 就 是 mini, 各 个 方面 的 mini。 

CD 主题 mini; 它 主 题 明确 ,关注 一 个 窗 的 对 象 ,企业 中 常用 的 可 以 针对 某 款 产品 、 某 个 
活动 . 某 个 广告 CAMPAIGN, 

© 内 容 mini: 内 容 精炼 ,网 页 数目 不 多 ,每 版 页 面 组 成 比较 少 。 它 同样 是 一 个 信息 发 
布 , 用 户 交互 .品牌 宣传 的 平台 。 

@ 表现 形式 mini: 因为 展示 内 容 少 ,选取 的 表现 形式 不 需要 太 多 。 但 MiniSite 可 以 根据 
需求 (活动 主题 ,产品 主题 ) 来 确定 所 选用 的 表现 形式 ,而 且 可 以 跟 企 业 官 网 风格 完全 不 同 。 

MiniSite 可 谓 麻 省 虽 小 ,五 脏 俱全 。MiniSite 具备 有 独立 的 网 址 ,鼓励 客户 直接 链接 。 
只 要 需要 ,我 们 还 可 以 为 它 添加 所 有 大 型 网 站 的 功能 , 像 留 言 板 、 产 品 发 布 系统 、 新 闻 系 统 都 
可 以 包含 ,腾讯 公司 为 非 会 员 用 户 自动 弹出 的 迷你 首页 也 是 属于 MiniSite 的 一 种 (网 址 : 
http://minisite. qq. com/others08/) ,通过 它 为 腾讯 网 带 来 了 巨大 的 流量 ,如 图 10-1 所 示 。 

2. 为 何 需要 MiniSite 

如 前 所 述 ,MiniSite 的 主要 特征 是 mini. 那 么 在 官网 存在 的 前 提 下 ,为 什么 还 需要 建设 
MiniSite 呢 ? 这 主要 是 为 满足 精准 营销 的 需求 。 

企业 推出 了 某 类 新 品 ,或 者 是 某 个 CAMPAIGN ,需要 在 网 站 上 宣传 。 网 络 营销 初期 的 
做 法 是 企业 通过 推广 将 网 民 引导 到 企业 官网 的 地 址 。 但 是 对 于 大 型 的 企业 品牌 来 讲 ,官网 
的 信息 非常 丰富 甚至 庞杂 ,网 民 登 录 后 ,很 容易 分 散 注 意 力 。 对 于 企业 本 次 特定 的 推广 来 
讲 , 效 果 可 能 会 打折 扣 。 如 果 为 产品 或 者 CAMPAIGN 单独 建设 自己 的 小 网 站 可 以 将 它 规 
划 、 制 作成 独立 的 工 型 展示 台 , 受 众 在 其 中 可 以 了 解 到 更 加 详细 直观 的 产品 、 活 动 信息 ,也 
可 以 促进 产品 的 销售 。 

3. 一 些 MiniSite 案例 

CD 余人 巢 咖啡 “ 红 杯 欢乐 送 ” 活 动 MiniSite 

图 10-2 所 示 是 淮 集 咖 罪 “ 红 杯 欢乐 送 ” 活 动 的 MiniSite, 循 着 缕缕 的 幽香 ,一 路 看 去 “省 
策 咖 啡 在 中 国 >“ 咖 啡 世界 *“ 冲 调 咖 啡 >"“ 咖 啡 一 族 ”"“ 幸 运 点击 ”…… 人 雀巢 咖啡 简体 网 站 
的 栏目 一 目 了 然 。 中 间 的 咖啡 女郎 还 不 时 地 冲 你 调皮 地 瞬 眼 ,一 杯 诱 人 的 雀巢 咖啡 就 端 在 
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图 10-1 
她 的 手中 , 尽 显 咖啡 本 色 。 这 次 瞧 巢 咖啡 小 型 网 站 构思 精巧 ,设计 精美 ,色彩 温 声 , 堪 称 
MiniSite 中 的 上 乘 之 作 。 
(2) 三 星 EVDO 手机 MiniSite 
图 10-3 所 示 是 三 星 官网 为 其 EVDO 产品 所 设计 的 MiniSite。 
为 沉稳 的 淡 咖 啡 色 基 调 ,很 简洁 地 介绍 了 手机 规格 .配件 等 内 容 
了 解 手 机 产品 o 


整体 site 背景 选择 了 较 
通过 site 就 可 以 很 清晰 地 
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图 10-3 

(3) 深圳 欢乐 谷 MiniSite 

图 10-4 所 示 是 深圳 欢乐 谷 的 活动 主题 MiniSite, 欢 乐 谷 每 月 都 会 有 大 型 活动 举行 , 制 
作 MiniSite 可 以 对 每 个 主题 活动 做 出 专业 的 、 突 出 主题 活动 的 网 页 页 面 设计 。 

(4) 中 兴 25 周年 庆 MiniSite 

图 10-5 所 示 是 中 兴 通 讯 25 周年 庆典 的 MiniSite, 通 过 创意 的 设计 ,可 以 突出 体现 公司 
25 年 的 发 展 历程 和 公司 的 企业 文化 。 
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4. MiniSite 制作 简单 

从 MiniSite 的 特点 来 看 , 它 具 有 比较 明显 的 单个 主题 。 在 产品 知识 上 的 互动 性 交流 比 
较 少 , 并 且 形 式 很 单一 。 其 次 技术 含量 并 不 很 高 , 主要 以 贴图 及 文字 描述 较 多 。 再 次 ,内 
容 相 对 来 说 非常 浅 白 ,从 页 面 来 数 , 每 个 MiniSite 的 页 面 组 成 都 比较 少 。 品 牌 展现 单一 , 完 
全 是 独立 表现 内 容 , 表 现形 式 相对 简单 。 就 算 有 游戏 形式 出 现 ,也 只 是 简单 的 娱乐 方式 ,从 
IT 程序 上 来 讲 是 不 复杂 的 。 

所 以 ,MiniSite 制作 相对 于 整个 功能 完善 的 企业 网 站 来 说 比较 简单 ,读者 在 学 完 本 书 前 
九 章 后 ,可 以 拥有 完成 本 MiniSite 实例 制作 的 基本 能 力 。 
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10.1.2 需求 分 析 


客户 是 一 个 数码 产品 零售 商 ,近期 在 互联 网 上 拓展 业务 ,在 腾讯 拍 拍 上 开设 网 店 ,可 是 
苦于 一 直 没 做 什么 宣传 ,顾客 寥寥 无 几 。4 年 一 度 的 世界 杯 将 至 , 想 借 世界 杯 之 风 在 互联 网 
上 做 一 个 宣传 推广 活动 。 

1. 客户 需求 

根据 与 客户 沟通 的 结果 ,分 析 得 到 需求 : 做 一 个 与 世界 杯 有 关 的 网 上 宣传 推广 
MiniSite。 

2. 确定 MiniSite 功能 和 创意 

(1) 确定 主推 产品 

该 公司 运营 的 网 店名 叫 * 优 耶 数码 ”, 主 营 耳 机 、 鼠 标 、 键 盘 、 摄 像 头 .音箱 ,麦克风 等 数码 
产品 ,我们 需要 在 这 些 产品 里 面 挑选 一 两 款 来 做 为 该 MiniSite 的 主打 产品 , 既 要 结合 价格 
优势 产品 ,又 要 与 世界 杯 有 点 关联 。 

最 后 选择 了 一 款 无 线 耳 机 和 一 套 无 线 键盘 鼠标 套装 作为 MiniSite 推广 产品 ,选择 的 原 
因 是 成 本 低 , 可 以 做 特价 。 还 有 看 世界 杯 可 以 用 无 线 耳 机 来 看 ,而 无 线 键 鼠 则 是 考虑 到 能 上 
网 购物 的 人 基本 上 已 经 拥有 传统 的 键盘 .鼠标 了 ,介绍 一 款 无 线 的 键盘 .鼠标 产品 可 以 引导 
顾客 消费 ,而 且 挑 选 的 是 游戏 款 的 键 鼠 ,对 于 世界 杯 期 间 玩 FIFA 之 类 的 足球 游戏 的 网 友 来 
说 也 是 一 个 诱惑 。 

(2) 确定 辅助 活动 

世界 杯 期 间 最 火热 的 就 是 比赛 结果 竞猜 了 ,所 以 ,我们 确定 搞 一 个 有 奖 竞猜 的 活动 。 

(3) 引导 入 主 店铺 

对 于 MiniSite 来 说 ,品牌 推广 是 一 方面 ,但 更 多 的 是 想 宣传 整个 网 店 ,所 以 特别 考虑 设 
置 了 一 个 现金 券 赠送 活动 ,购买 指定 产品 ,可 以 使 用 优惠 券 。 

根据 上 述 分 析 ,确定 一 共 要 做 4 个 页 面 : 无 线 耳 机 促销 无 线 键 盘 鼠 标 促销 、 世 界 杯 有 
奖 竞猜 .现金 券 大 派送 。 

(4) 确定 宣传 文案 

文案 在 制作 MiniSite 页 面 时 要 用 到 ,所 以 要 花费 点 心思 去 写 。 下 面 是 这 次 活动 的 宣传 
文案 。 


激情 世界 杯 ,特价 包 邮 促销 活动 


作为 全 球 瞩 目的 焦点 ,即将 于 6 月 11 日 举行 的 第 19 Ж 2010 年 南非 世界 杯 ,无 疑 将 
成 为 亿 万 球迷 欢乐 的 海洋 ,也 将 彻底 引爆 球迷 们 的 盛夏 激情 。 你 将 如 何 享受 这 场 伟 大 的 
足球 盛宴 呢 ? 在 欢呼 和 疯狂 中 为 自己 喜欢 的 球 队 呐 喊 助威 吧 ! 

为 了 让 广大 球迷 能 够 更 高 质地 享受 世界 杯 ,我们 为 球迷 们 提供 了 最 有 价值 的 世界 杯 
“特价 包 邮 大 礼包 ”, 优 耶 数 码 于 5 月 24 日 火热 启动 “激情 世界 杯 ,特价 包 邮 促销 活动 ”。 
通过 空前 让 利 的 丰厚 大 礼 , 优 耶 数码 让 球迷 们 不 但 能 够 看 好 世界 杯赛 事 ,更 能 够 置身 其 
中 感受 到 世界 杯 的 激情 与 荣耀, 体会 真正 的 绿 荫 风采 。 
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耳机 一 一 看 世界 杯 的 利器 ,深夜 静 享 世界 杯 之 选 。 

音响 一 一 看 世界 杯 的 知音 ,与 液晶 显示 器 搭配 效果 最 佳 , 近 距离 享受 音效 。 

鼠标 一 一 手感 顺 滑 细腻 ,方便 我 们 浏览 图 片 或 网 页 ,为 观看 世界 杯 带 来 好 心情 。 

键盘 一 一 世界 杯 在 键盘 上 跳舞 ,激动 时 就 敲 键盘 ,就 像 拔 再 着 一 只 足球 ,我 让 它 跳 
Ф.Е ЛА, ЕТ 嘻 嘻 一 

一 重奏 : 

全 国 六 大 区 普通 快递 免 运 费 

活动 时 间 : 2010 #5 A 24 8—8 A 318 

全 场 商品 针对 以 下 地 区 免 运费 : 广东、 北京. 上海、 浙江、 江苏 、 福 建 

只 要 是 普通 快递 能 到 的 地 方 , 优 耶 承诺 : 一 律 运费 全 免 。 

访问 地 址 : XXX。 

二 重奏 : 

活动 当天 24 小 时 内 ,前 50 名 消费 者 ,可 享受 订单 包 邮 并 再 获 5 元 现金 券 ! 

机 会 难得 ,看 您 手 快 ! 

活动 时 间 : 2010 #6 A 11 H 

三 重奏 : 

优 耶 促销 优惠 大 行动 , 永 不 断 续 ,一 直 体 贴 着 您 ! 

更 多 活动 陆续 上 架 , 效 请 期 待 ! 

引领 数码 时 尚 畅 响 激情 世界 杯 ”访问 : http://shop. paipai. com/976141092/ 


10.1.3 版 面 设计 


1. 确定 网 页 大 小 

按 流行 的 配置 1024X768 像素 ,确定 网 页 宽 1000 像素 ,高 600 像素 ,刚好 在 ТЕ 浏览 器 
一 屏 内 显示 。 

2. 确定 颜色 

虽然 网 店 的 整体 颜色 为 灰 黑色 ,如 图 10-6 所 示 , 但 MiniSite 可 以 选用 适合 活动 主题 的 
色调 ,而 不 是 一 贯 的 灰 黑色 ,针对 世界 杯 , 选 择 足 球场 的 绿色 为 主 色调 。 


3. 确定 页 面 布 局 

MiniSite 的 页 面 布局 很 重要 ,创意 能 否 展现 出 来 很 大 程度 由 布局 决定 。 布 局 概要 设计 
如 图 10-7 所 示 。 

4. 用 Photoshop 设计 页 面 

CD 打 好 底 图 , 宽 1020 像素 ,高 6020 像素 ,分 辩 率 选 得 高 点 儿 , 方 便 输出 清晰 图 ,如 
图 10-8 所 示 。 

(2) 选 一 幅 足 球场 的 图 片 , 取 绿色 草地 部 分 , 截 成 长 方形 ,如 图 10-9 所 示 。 并 将 颜色 用 
Photoshop 的 “图 像 >“ 色 阶 ” 命 令 进行 调节 ,直到 变 成 想 要 的 绿色 为 止 ,用 它 来 做 渐变 平 铺 
背景 ,如 图 10-10 所 示 。 
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蕊 节录 码 是 广州 优 取 隐 络 科 扫 有 限 公司 旗下 持 拍 总 襄 ， 同 时 优 到 数码 为 了 促进 更 全 有 盯 相 志 激 二 的 闲 们 轻松 网 络 创 此 ， 公 司 
HATO “网络 芭 销 ” 种 “网 洛 代销 ”为 主 的 文 易 许 628 禁 式 ， 打 适 网 络 销 千 供 训 链 关键 环 攻 ， 为 广大 创业 者 提供 一 手 的 负 源 ， 
GO нонат аа ае. 

优惠 数码 的 出 现 ， 对 于 网上 备 入 商 来 说 ， 儿 化 们 技 到 有 竞争 力 数 友 类 伯 源 ， 区 得 品牌 代理 区 格 ， 并 以 等 库存 的 方式 这 行销 
此 ， 极 大 降 包 了 网络 由 门槛 ， 并 增强 其 在 巾 络 季 管 领域 物 竞 争 能 力 ， 对 于 供应 商 则 构建 一 个 损 尖 广泛， 高 效 与 殊 二 低廉 移 网 络 
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图 10-9 图 10-10 


СЗ) 利用 钢笔 工具 、 圆 角 和 矩形 工具 进行 版 面 绘 制 , 如 图 10-11 所 示 。 


图 10-11 


(4) 导入 素材 图 片 进行 处 理 后 效果 如 图 10-12 所 示 o 


图 10-12 


(5) 对 模板 页 进行 切片 ,切片 时 在 图 中 放置 内 容 的 区 域 切 一 段 可 无 限 拉 伸 的 图 片 , 留 给 
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编辑 长 内 容 时 使 用 ,使 用 时 将 这 些 图 设 为 它们 所 在 表格 的 背景 图 片 ,并 将 表格 的 原 图 删除 即 
可 ,如 图 10-13 所 示 。 


图 10-13 


(6) 将 切片 后 的 图 片 另 存 为 html 文件 。 
至 此 ,版 面 设计 基本 完成 ,如 图 10-14 所 示 , 接 下 来 就 是 根据 不 同 的 内 容 使 用 
Dreamweaver 修改 模板 文件 ,设置 超级 链接 ,完成 功能 部 分 的 实现 。 


a] 
seem |а|: 5 Tiv- Sio. заш. e " 


图 10-14 


10.1.4 功能 实现 


这 部 分 将 对 做 好 的 模板 页 使 用 Dreamweaver CS4 进行 修改 ,修改 网 页 的 标题 ,使 网 页 
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居中 显示 ,为 菜单 增加 热 区 ( 见 图 10-15) ,设置 好 超级 链接 。 


"па, 


5250 @| с | 
ттт тнт ттт. A 


图 10-15 


CD 设置 网 页 标题 。HTML 标题 的 设置 如 图 10-16 所 示 , 


Ї Шон) dum. [аня 
В 10-16 


(2) 选择 所 有 的 表格 ,然后 在 表格 属性 面板 的 “对 齐 * 下 拉 列 表 中 ,选择 居中 对 齐 , 如 
图 10-17 所 示 。 
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图 10-17 
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(3) 加 上 现金 券 图 片 无线 耳机 宣传 图 片 无线 键盘 鼠标 宣传 图 片 ,引导 入 不 同 的 产品 ， 
新 建 一 个 文件 夹 ,整理 这 些 网 页 文件 ,文件 名 分 别 为 index. HTML. index2. HTML index4. 
HTML, 图 片 文件 夹 images 要 与 这 些 文 件 放 在 一 起 ,如 图 10-18 所 示 。 


(4) 用 ASP. NET(C# ) 制 作 竞猜 页 面 。 
(D 用 Access 建立 数据 库 dbl. mdb, 包 含 两 个 表 , 表 10-1 为 пате 表 , 表 10-2 为 guess 
表 , 其 中 name 表 的 内 容 需 要 预先 录入 世界 杯 32 强 名 单 。 


表 10-1 

字段 名 数据 类 型 备 注 字段 名 数据 类 型 备 注 
No 自动 编号 队伍 编号 ,主键 Sn 文本 队伍 名 称 
Ж 10-2 

字段 名 数据 类 型 备 注 字段 名 数据 类 型 备 注 
Sno 自动 编号 竞猜 者 序号 ,主键 53 整数 季军 队伍 id 
Snl 整数 冠军 队伍 id Mail 文本 竞猜 者 邮箱 
Sn2 整数 亚军 队伍 id 

О 环境 准备 。 


下 载 并 安装 Visual Studio 2008 express 学 习 版 

网 址 : http://msdn. microsoft. com/zh-cn/express/default. aspx 

@ 运行 VS2008 并 打开 上 一 步 建立 好 的 网 站 文件 夹 ,如 图 10-19 所 示 ,在 该 网 站 上 新 建 
一 个 Web 窗 体 ,注意 要 选择 编程 语言 为 “Visual C#”, 如 图 10-20 所 示 。 
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图 10-20 


CD 使 用 数据 库 链接 控件 ( 见 图 10-21) ,连接 数据 库 文件 dbl. mdb( 见 图 10-22). 

© 设置 三 个 标签 控件 ,分 别 填 人 冠军 .亚军 ,季军 字样 ,如 图 10-23 所 示 。 

设置 三 个 DropDownList 控件 ,分 别 放 在 冠 . 亚 .季军 后 ,如 图 10-24 所 示 。 

@ 分 别 设 置 这 三 个 DropDownList 控件 与 数据 库 源 AccessDataSourcel 绑 定 , 如 
图 10-25 所 示 。 
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图 10-22 


图 10-23 
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插 人 标签 控件 和 文本 框 控 件 , 用 来 收集 用 户 的 邮箱 ,如 图 10-26 所 示 。 
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© 加 入 电子 邮箱 验证 控件 RegularExpressionValidator. Ш[ 10-27 所 示 。 
D 设 定 验 证 对 象 和 出 错 提 示 并 设置 验证 规则 如 图 10-28 所 示 。 

D 将 按钮 控件 放 入 底部 ,并 设置 提示 文本 ,如 图 10-29 所 示 。 

O 双击 “提交 竞猜 ”按钮 ,输入 以 下 代码 。 


using System; 


T ObjectDataSource 
Ф, niDatosouree 
Th, Si tellepDateSource. 
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图 10-28 
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using System.Collections.Generic; 


using System.Web; 
using System.Web.UI; 


using System.Web.UI.WebControls; 


网 页 设计 与 网 站 规划 


using System.Data.OleDb; // 以 olepb 方 式 连接 数据 库 , 要 加 上 此 代码 
public partial class index3 : System.Web.UI.Page 


t 


static bool bCheck; // 声 明 一 个 布尔 型 变量 ,用 于 存放 邮箱 合法 性 的 检查 结果 
void CheckMail() // 创 建 一 个 不 返回 任何 值 的 方法 ,用 于 检查 新 用 户 名 是 否 已 存在 


t 


) 


OleDbConnection conn- new OleDbConnection|(); 


conn.ConnectionString- "Provider-Microsoft.Jet.OleDb.4.0;"* "Data Source- "+ 
Server.MapPath ("^ /dbl .mdb") ; /数据库 连接 字段 

сопп.Ореп () ; 

string strSQL- "select * from guess where mail- '"+ TextBoxl.Textt "'"; 

OleDbCommand com- new OleDbCommand (strSQL, conn); 

OleDbDataReader dr-com.ExecuteReader(); — // 按 所 给 条 件 查询 数据 库 , 看 是 否 返 回 记 录 

if (dr.Read()) // 有 记录 返回 即 为 真 ,说 明 有 重复 

{ 
bCheck= false; 


bCheck- true; 
} 
dr.Close(); 


conn.Close(); 


protected void Page Load(object sender, EventArgs e) 


t 


) 


protected void Buttonl Click(object sender, EventArgs e) 


t 


CheckMai1 () ; 
if(!bCheck) 
t 
Response.Write ("< script language=javascript>alert ("同一 个 邮箱 已 经 参与 过 本 次 
活动 ,请 耐心 等 候 比 赛 结 果 。') ;< /script>"); 
return; 
} 
OleDbConnection conn- new OleDbConnection (); 
conn. ConnectionString = " Provider = Microsoft. Jet. OleDb. 4. 0;" +" Data Source =" 
+ Server .MapPath ("~ /db1 .mdb") ; 


string strVal="'"+ DropDownListl.SelectedValue. ToString () +" ', ' "+ DropDownList2. 
SelectedValue.ToString () +"', '"+ DropDownList3. SelectedValue. ToString () +"','"+ 
TextBoxl.Text+"'"; 
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string strIns= "insert into guess(snl,sn2,sn3,mail)values("+strVal+")"; 


// 获 取 用 户 选择 的 结果 ,并 插入 数据 库 


OleDbCommand insCom- new OleDbCommand (strIns, conn); 
OleDbDataAdapter da- new OleDbDataAdapter () ; 
conn.Open () ; 

da.InsertCommand- insCom; 
da.InsertCommand.ExecuteNonQuery () ; 


Response Write ("< script language- javascript» alert (Е ЖЗ ЛИЛ] !');< /script» "); 


) 
O 运行 效果 如 图 10-30 所 示 。 


(B tili Usi иткен E 


JURE EC TRMA TUS RE КДА! 
NE .. NH. BALETA | 


RE. (вох 
zx. s= | 
şa, [еш B 
请 输入 您 的 邮箱 ， Ьа 
T 


内 薄 中 冠军 者 可 获 价 值 168 元 的 神秘 大 奖品 ! 凡 薄 中 亚军 者 可 获 价 值 8 元 的 神秘 大 奖品 1 


国 2 大 


O 竞猜 管理 页 面 设计 。 


a. 可 以 将 index3. aspx 拷贝 一 次 ,然后 修改 页 面 的 重复 区 域 .将 表格 里 的 图 片 变 成 背景 


图 片 ,如 图 10-31 所 示 。 


b. 拉 入 GridView 控件 ,用 它 来 安装 中 奖 结果 ,用 默认 的 命名 GridView1、GridView2、 


GridView3, 如 图 10-32 所 示 。 
c. 编写 代码 。 


下 面 代码 只 是 按钮 点 击 后 的 事件 ,其 他 代码 未 列 出 ,查询 中 奖 也 只 是 查询 冠军 的 纪录 ， 


其 余 的 代码 类 似 , 改 一 下 就 行 。 


protected void Buttonl Click(object sender, EventArgs e) 


(if (TextBoxl.Text ! = "GoodLuckYoyo") // 上 默认 密码 ,区 分 大 小 写 


{ 


这 


[oar crsseorey cables 01 А27 
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图 都 改 成 了 背景 
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将 GridView 控 件 拉 入 页 面 
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Response.Write ("< script language=javascript>alert ("ННЯ !');</script>"); 


return; 
H 
string strSQLl; 


strSQLl- "select * from guess where sn1= "+ DropDownListl.SelectedValue.TbString (); 
OleDbConnection conn- new OleDbConnection(); 
conn.ConnectionString- "Provider-Microsoft.Jet.OleDb.4.0;"- "Data Source- "+ 


图 10-32 
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Server.MapPath ("~ /db1 .mdb") ; // 连 接 数据 库 
сопп.Ореп (); 
OleDbCommand com= пем OleDbCommand (strSQLl, conn); 
OleDbDataReader dr-com.ExecuteReader(); // 执 行 查询 
GridViewl.DataSource=dr; // 将 查询 结果 填充 人 Gridviewl 控件 
GridViewl.DataBind(); 
if (GridViewl.Rows.Count ==0) 
{ 
Response.Write ("< script language- javascript>alert(" 未 找到 猜 中 冠军 的 纪录 ! 
');< /script>"); 
) 


сопп.С1озе () ; 


) 
运行 效果 如 图 10-33 所 示 o 
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图 10-33 


至 此 ,我 们 基本 上 完成 了 这 个 MiniSite 的 设计 和 制作 。 


10.2 企业 网 站 设计 实例 


上 一 个 MiniSite 网 站 制作 实例 ,我 们 已 经 将 一 个 较 完整 的 网 站 完成 了 ,但 它 只 是 一 个 结构 
简单 的 专题 式 网 站 。 在 实际 的 网 站 制作 中 ,我 们 会 遇 到 更 复杂 的 网 站 ,例如 电子 商务 交易 网 
站 ,新 闻 网 站 、 论 坛 网 站 、 交 友 网 站 ,企业 网 站 等 ,在 这 些 网 站 里 ,又 以 企业 网 站 的 制作 需求 量 为 
最 大 ,本 节 实 例 将 以 一 个 对 互联 网 依赖 较 高 的 计算 机 公司 为 蓝本 ,制作 一 个 企业 网 站 。 
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10.2.1 制作 企业 网 站 要 注意 什么 


在 了 解 制作 企业 网 站 要 注意 的 内 容 之 前 ,我 们 先 来 简单 认识 下 一 个 典型 的 网 站 建设 
流程 : 

° 建设 网 站 前 的 市 场 分 析 。 

。 建设 网 站 的 目的 及 功能 定位 。 

。 网 站 技术 解决 方案 。 

。， 网 站 内 容 规划 。 

。 网 页 设计 。 

° 网 站 维护 。 

° 网 站 测试 。 

。 网 站 发 布 与 推广 。 

° 网 站 建设 日 程 表 。 

° 费用 预算 。 

建设 一 个 完整 的 企业 网 站 ,上 面 的 步骤 是 必 不 可 少 的 ,而 且 要 注意 企业 网 站 与 普通 网 站 
制作 不 可 一 概 而 论 , 有 一 些 问题 是 在 制作 企业 网 站 时 必须 要 注意 的 ,否则 ,做 出 的 网 站 企业 
不 满意 ,实际 使 用 效果 也 不 好 。 

1. 对 企业 网 站 制作 的 目标 和 用 户 需 求 要 有 了 明确 的 分 析 

企业 网 站 是 展现 企业 形象 .介绍 产品 和 服务 、 体 现 企业 发 展 战略 的 重要 途径 ,因此 必须 
明确 设计 站 点 的 目的 和 用 户 需求 ,从 而 做 出 切实 可 行 的 设计 计划 。 要 根据 消费 者 的 需求 .市 
场 的 状况 .企业 自身 的 情况 等 进行 综合 分 析 , 网 站 的 最 终 目的 是 赢利 ,是 给 消费 者 提供 信息 
的 ,牢记 以 * 消 费 者 (customer) ?为 中 心 进 行 设 计 规 划 。 

如 果 你 的 目标 市 场 是 那些 富有 的 商业 专业 人 士 ,那么 网 站 设计 应 大 方 得 体 , 简洁 易 用 ; 
但 如 果 是 以 年 轻 人 为 客户 群体 , 则 可 以 把 版 面 做 的 生动 活泼 一 些 。 总 之 要 因 人 而 异 。 要 记 
住 : 网 站 是 要 让 目标 客户 看 的 ,并 吸引 他 们 购买 ,所 以 永远 要 把 客户 的 感受 放 在 第 一 位 。 

在 设计 规划 时 要 考虑 : 建设 网 站 的 目的 是 什么 ? 为 谁 提供 服务 和 产品 ?企业 能 提供 什 
么 样 的 产品 和 服务 ? 网 站 的 目的 消费 者 和 受众 的 特点 是 什么 ? 企业 产品 和 服务 适合 什么 样 
的 表现 方式 (风格 )? 

2. 企业 网 站 建设 总 体 设计 方案 主题 鲜明 

目标 明确 了 .下 一 步 就 是 网 站 的 构思 创意 即 总 体 设计 方案 。 对 网 站 的 整体 风格 和 特色 
作出 定位 ,规划 网 站 建设 的 组 织 结构 。 网 站 应 针对 所 服务 对 象 的 不 同 而 具有 不 同 的 形式 。 
有 些 站 点 只 提供 简洁 文本 信息 ;有 些 则 采用 多 媒体 表现 手法 ,提供 华丽 的 图 像 .闪烁 的 灯光 、 
复杂 的 页 面 布置 ,甚至 可 以 下 载 声音 和 录像 片段 。 网 站 要 做 到 主题 鲜明 ,要 点 突出 ,以 简单 
明确 的 语言 体现 站 点 的 主题 。 

3. 企业 网 站 建设 的 版 式 设计 

企业 网 站 建设 要 讲究 编排 和 布局 ,虽然 主页 的 设计 不 等 同 于 平面 设计 ,但 它们 有 许多 相 
近 之 处 。 通 过 文字 图 形 的 组 合 ,表达 出 和 谐 与 美 。 一 个 优秀 的 网 站 建设 者 也 应 该 知道 哪 一 
段 文字 图形 落 于 何 处 ,才能 使 整个 网 页 生 辉 。 
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4. 色彩 在 企业 网 站 建设 中 的 作用 

网 站 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 丰富 的 内 容 , 也 不 是 网 站 合理 的 版 面 布局 ,而 是 
网 站 的 色彩 。 不 同 的 色彩 搭配 会 产生 不 同 的 效果 .并 可 能 影响 到 访问 者 的 情绪 。 一 个 网 站 
设计 成 功 与 否 ,在 某 种 程度 上 取决 于 设计 者 对 色彩 的 运用 和 搭配 。 因 而 确定 网 站 的 标准 色 
彩 是 相当 重要 的 一 步 。 

色彩 的 数量 : 网 站 整体 使 用 色彩 以 两 到 三 种 为 宜 。 颜 色 过 多 会 使 网 页 看 起 来 很 花哨 ， 
但 缺乏 内 在 的 美感 。 在 颜色 选择 和 搭配 上 可 借鉴 一 些 国际 大 公司 网 站 ,他 们 对 颜色 的 选择 
相当 审慎 。 

色彩 的 搭配 : 色彩 搭配 一 定 要 合理 ,给 人 以 和 谐 愉 快 的 感觉 。 一 般 来 说 ,适合 于 网 页 标 
准 色 的 颜色 有 蓝 色 、. 黄 /橙色 . 黑 / 灰 /白色 三 大 系列 色 。 在 颜色 的 搭配 上 ,有 几 种 比较 经 典 的 
方案 : 红 / 黄 / 白 ; Ж/А: 红 / 灰 / 白 ; Ж/Ю/Н; 黄 / 灰 / 白 。 实 在 不 行 就 去 Google 一 下 吧 ， 
找 一 个 自己 喜欢 的 网 站 ,看 看 人 家 的 颜色 是 怎么 搭配 的 ,或 许 会 对 你 有 很 大 启发 。 

其 他 注意 事项 : 避免 采用 纯度 很 高 的 单一 色彩 ,这 样 容易 造成 视觉 疲劳 。 避 免 使 用 过 
于 明亮 或 对 比 过 于 强烈 的 颜色 ,它们 会 对 眼睛 造成 伤害 ,如 白 底 黄 字 等 。 颜 色 对 比 过 于 接近 
或 不 合理 的 ,如 深 底 浅 字 、 深 底 深 字 等 (例如 深蓝 色 底 和 黑 字 ) 也 是 设计 之 大 忌 。 建 议 最 好 用 
浅 色 背景 (当然 白色 最 好 ) , 黑 或 深 色 文字 。 

5. 企业 网 站 建设 的 形式 与 内 容 相 统一 

要 将 丰富 的 意义 和 多 样 的 形式 组 织 成 统一 的 页 面 结构 ,形式 语言 必须 符合 页 面 的 内 容 ， 
体现 内 容 的 丰富 含义 。 运 用 对 比 与 调和 、 对 称 与 平衡 ,节奏 与 韵律 以 及 留 白 等 手段 ,通过 空 
间 、 文 字 、 图 形 之 间 的 相互 关系 建立 整体 的 均衡 状态 ,产生 和 谐 的 美感 。 如 对 称 原则 在 页 面 
设计 中 , 它 的 均衡 有 时 会 使 页 面 显得 果 板 ,但 如 果 加 入 一 些 富有 动感 的 文字 、 图 案 , 或 采用 
夸张 的 手法 来 表现 内 容 往 往 会 达到 比较 好 的 效果 。 

6. 企业 网 站 建设 的 三 维 空间 的 构成 和 虚拟 现实 

网 络 上 的 三 维 空间 是 一 个 假想 空间 ,这 种 空间 关系 需 借助 动静 变化 、 图 像 的 比例 关系 等 
空间 因素 表现 出 来 。 在 页 面 中 ,图 片 , 文 字 位 先前 后 释 压 ,或 页 面 位 置 变 化 所 产生 的 视觉 效 
果 都 各 不 相同 。 图 片 文字 前 后 全 压 所 构成 的 空间 层次 目前 还 不 多 见 ,网 上 更 多 的 是 一 些 设 
计 比 较 规范 、 简 明 的 页 面 ,这 种 县 奈 排列 能 产生 强 节奏 的 空间 层次 感 ,视觉 效果 强烈 。 

7. 企业 网 站 建设 的 多 媒体 功能 的 利用 

网 络 资源 的 优势 之 一 是 多 媒体 功能 。 若 要 吸引 浏览 者 的 注意 力 ,页 面 的 内 容 可 以 用 三 
维 动画 .Flash 等 来 表现 。 但 要 注意 ,由 于 网 络 带 宽 的 限制 ,在 使 用 多 媒体 的 形式 表现 网 页 
的 内 容 时 应 考虑 客户 端的 传输 速度 。 

8. 企业 网 站 建设 测试 和 改进 

测试 实际 上 是 模拟 用 户 询问 企业 网 站 建设 的 过 程 .用 以 发 现 问题 并 改进 设计 。 要 注意 
证 用 户 参 与 网 站 测试 。 

9. 企业 网 站 建设 的 内 容 更 新 

企业 网 站 建成 后 ,要 不 断 更 新 内 容 。 站 点 信息 的 不 断 更 新 ,是 让 浏览 者 了 解 企业 的 发 展 
动态 ,同时 也 会 帮助 企业 建立 良好 的 形象 。 

10. 企业 网 站 建设 针对 搜索 引擎 优化 

搜索 引擎 优化 这 方面 在 企业 网 站 设计 里 显得 越 来 越 重 要 ,设计 好 的 网 站 能 顺利 被 搜索 
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引擎 抓 取 ,并且 相关 关键 字 能 排 在 较 前 的 位 置 , 可 以 为 网 站 带 来 大 量 的 访客 , 极 大 地 推进 企 
业 产品 的 销售 。 

CD 内 容 安排 要 合理 。 搜 索引 擎 对 页 面 简 单 .内容 一 成 不 变 的 网 站 一 点 也 不 感 兴趣 , 例 
如 很 多 企业 网 站 模块 就 是 主页 联系 我 们 关于 我 们 ,董事 长 的 话 我们 的 宗旨 。 这 些 网 站 搜 
索引 擎 光顾 一 次 后 ,就 极 少 再 次 光顾 ,搜索 相关 关键 字 排 名 也 很 低 。 

企业 网 站 最 重要 的 是 : 要 给 访客 提供 更 多 的 解决 问题 的 有 用 的 信息 。 在 访客 浏览 你 的 
网 站 的 过 程 当 中 ,能 被 你 的 网 站 吸引 ,让 访客 感觉 你 的 网 站 能 够 给 他 提供 一 些 很 有 用 的 信 
息 ,而 不 仅仅 只 是 企业 的 网 络 广告 ,这样 才 会 让 访客 对 你 的 网 站 产生 好 感 ,让 顾客 在 了 解 你 
的 产品 之 前 就 对 企业 建立 了 一 种 信赖 感 ,进而 访客 会 主动 了 解 你 的 产品 ,信赖 你 的 产品 ,这 
时 候 访 客 就 会 主动 地 购买 企业 的 产品 或 者 服务 。 建 立信 誉 之 后 ,这 些 访 客 会 在 享受 企业 的 

品 和 服务 的 同时 ,会 顺便 宣传 (包括 亲戚 朋友 和 网 络 友人 ) 你 的 产品 ,同时 他 们 还 会 努力 地 
搜索 你 的 企业 的 其 他 产品 ,并且 将 这 些 链接 放 在 论坛 空间 .留言 板 等 搜索 引擎 可 以 访问 到 
的 地 方 , 这 样 可 以 增加 网 站 的 链接 数 ,让 搜索 引擎 觉得 你 的 网 站 有 很 多 重要 的 内 容 。 

(2) 有 了 大 量 的 内 容 , 你 才能 够 在 客户 的 心里 建立 良好 的 信誉 和 权威 的 地 位 。 还 用 上 
面 的 例子 ,如 果 按 照 网 站 介绍 的 方法 ,做 出 了 好 吃 的 回锅 肉 , 又 做 出 了 好 吃 的 牛肉 干 ,这 个 网 
站 所 销售 的 菜谱 才 会 有 吸引 力 。 因 为 你 已 经 证 明了 你 的 信息 和 产品 是 有 用 的 。 没 有 前 面 的 
大 量 内 容 做 铺垫 ,你 就 没有 机 会 向 客户 证 明 这 一 点 。 

由 于 不 同 的 搜索 引擎 在 网 页 支持 方面 存在 差异 ,因此 在 设计 网 页 时 不 要 只 注意 外 观 漂 
亮 ,许多 平常 设计 网 页 时 常用 到 的 元 素 到 了 搜索 引擎 那里 会 产生 问题 。 

(1) 框架 结构 (Frame Sets) 与 关键 字 设置 。 大 多 数 的 搜索 引擎 不 能 “ 读 懂 ” 使 用 帧 结构 
的 网 页 ,就 像 古老 的 浏览 器 看 不 懂 构建 框架 结构 的 说 明 网 页 ,但 可 利用 noframe tags 来 解决 
问题 。 在 noframe tags 中 加 入 文本 信息 ,告诉 不 支持 帧 结构 的 浏览 器 某 些 信息 ,更 重要 的 
是 ,要 在 其 中 加 入 引导 搜索 引擎 继续 访问 网 页 的 链接 ,以 便 搜 索引 擎 索引 全 部 网 页 Cnoframe 
tags 中 的 文本 对 支持 帧 结构 的 浏览 器 来 说 将 被 忽略 )。 

因此 ,建设 企业 网 站 时 ,要 抛弃 框架 结构 ,并 且 每 一 个 页 面 都 要 做 好 关键 字 设置 ,例如 网 
站 标题 ,网 页 内 容 描 述 这 些 必须 要 具备 ,如 果 技 术 条 件 允 许 的 话 , 在 网 站 标题 里 加 入 该 页 面 
的 关键 字 。 

(2) 图 像 区 块 (Image Maps)。 除 AltaVista、Google 和 Northern Light( 现 已 停止 公共 
搜索 服务 ) 明 确 支持 图 像 区 块 链接 外 ,其 他 引擎 是 不 支持 它 的 。 当 “ 蜂 蛛 ”程序 过 到 这 种 结构 
时 ,往往 会 感到 茫然 不 知 所 措 。 因 此 尽量 不 要 设置 Image Мар 链接 。 

СЗ) 特效 链接 。 我 们 经 常 看 到 有 些 网 站 为 导航 链接 加 上 了 特效 ,如 点 击 某 个 项 目 会 展 
开 下 层 链 接 等 。 这 些 效果 一 般 通 过 JavaScript 实现 ,视觉 上 非常 新 颖 ,但 在 “蜘蛛 ”程序 的 眼 
里 则 没 那么 诱 人 ,相反 它 无 法 解读 这 种 链接 。 为 了 让 搜索 引擎 顺利 检索 到 你 的 网 页 ,建议 还 
是 牺牲 掉 一 些 花哨 的 东西 。 

(4) Flash。 虽 然 Flash 制作 的 网 页 视觉 效果 较 好 ,但 这 一 类 的 网 站 很 难 被 百度 搜索 引 
擎 索引 。 明 智 的 做 法 是 提供 Flash 和 非 Flash 网 页 两 种 选择 ,这 样 既 增加 了 网 页 的 观赏 性 ， 
又 照顾 到 了 搜索 引擎 的 情绪 。 

(5) 加 密 网 页 。 所 谓 加 密 一 般 是 通过 Unicode 码 的 转换 实现 的 ,但 经 过 实验 ,中 文 文字 
太 多 会 导致 你 的 页 面 代 码 变 得 很 大 ,英文 反而 会 有 压缩 效果 ,这 是 因 Unicode 码 转换 导致 
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的 。 加 密 后 的 网 页 能 够 正常 在 Internet Explorer 或 者 Netscape Navigator 中 浏览 ,但 是 源 
代码 无 法 正常 编辑 或 查看 ,这 样 能 够 有 针对 性 的 保护 你 的 重要 HTML 文件 。 除 非 你 不 希 
望 搜索 引擎 检索 你 的 网 页 ,否则 不 要 给 你 的 网 页 加 密 。 

(6) 网 页 容量 与 链接 要 科学 。 包 括 图 像 在 内 的 网 页 字 节 数 最 好 不 要 超过 50KB。 体 型 
庞大 的 网 页 下 载 速度 慢 , 不 仅 会 让 普通 访问 者 等 得 心急 如 焚 , 也 会 导致 网 页 的 浏览 率 下 降 ， 
从 而 影响 企业 的 宣传 效果 。 搜 索引 擎 抓 取 缓慢 也 会 为 网 站 排名 减 分 。 

切忌 设计 页 面 时 留 有 空 链接 或 是 死 链 接 , 这 些 会 大 大 影响 搜索 排名 ,一 个 科学 合理 的 层 
进 式 链接 架构 ,可 以 更 利于 搜索 引擎 快速 .全 面 地 抓 取 网 站 的 内 容 。 

(7) 独立 域名 与 付费 虚拟 主机 。 目 前 搜索 引擎 都 不 愿 收 录 位 于 免费 主页 空间 上 的 网 
站 。 部 分 搜索 引擎 还 会 根据 域名 的 后 级 对 网 站 进行 加 减 分 ,. com 域名 为 最 优 ,其 他 域名 后 
级 均 会 有 不 同 程度 的 加 分 或 减 分 。 网 速 快 .稳定 的 服务 器 IP, 也 会 作为 搜索 排名 的 一 个 考 
BA. 


10.2.2 需求 分 析 


在 9.4 节 网 站 设计 流程 里 ,我 们 已 经 学 习 了 网 站 建设 流程 ,了 解 到 需求 分 析 是 很 重要 的 
一 个 环节 。 

一 般 来 说 , 按 网 站 制作 任务 流程 来 说 ,客户 会 先 提出 一 个 基本 要 求 , 然 后 我 们 需要 再 与 
客户 详细 沟通 ,了 解 企业 的 情况 ,根据 这 些 情况 确定 网 站 制作 的 最 终 要 求 。 

本 实例 是 一 家 名 叫 闪电 电脑 科技 的 电脑 公司 ,客户 一 开始 提 的 网 站 制作 要 求 很 简单 : 
制作 公司 网 站 ,展示 公司 信息 、 服 务 内 容 、 产 品 图 片 。 经 过 详细 了 解 ,该 公司 以 计算 机 维修 业 
务 为 主 ,辅助 销售 数码 产品 ,但 该 公司 的 位 置 较 偏 个 , 想 在 网 络 上 打 广 告 接 业 务 , 提 供 上 门 
服务 。 

根据 对 该 企业 网 站 建设 的 需求 ,分 析 得 到 网 站 的 基本 功能 如 下 : 

(1) 企业 简介 : 这 个 功能 是 必 不 可 少 的 ,收集 企业 的 信息 ,整理 出 规范 的 图 文 描述 ,在 
网 站 上 合理 放置 。 

(2) 新 闻 中 心 : 为 了 增加 网 站 的 内 容 , 使 搜索 引擎 经 常 来 访 ,新 闻 中 心 必 不 可 少 ,可 以 
放 企业 新 闻 活动 报道 ,也 可 以 放 些 企业 的 技术 经 验 类 的 文章 。 

(3) 网 上 下 订单 : 该 企业 是 要 实现 网 上 下 订单 ,然后 上 门 服务 的 ,所 以 这 个 功能 必须 
要 有 。 

(4) 求助 中 心 : 为 培养 顾客 的 忠诚 度 , 在 网 站 设立 求助 中 心 这 个 模块 中 ,员工 利用 空余 
时 间 ,免费 为 注册 会 员 解 答 问题 ,解决 一 些小 问题 。 

(5) 产品 展示 : 该 公司 兼顾 网 上 销售 产品 ,所 以 产品 展示 并 下 订单 的 功能 必 不 可 少 。 

(6) 网 上 支付 : 这 是 发 展 到 一 定 阶 段 才 需要 加 入 的 功能 ,可 预 留 接口 。 

Ст) 网 上 调查 : 用 来 收集 访客 对 公司 网 站 .产品 的 意见 ,这 个 功能 可 在 网 站 运营 正常 后 
An. 

(8) 会 员 俱乐部 : 通过 顾客 注册 的 信息 ,定期 发 送 电子 邮件 ,建立 会 员 俱 乐 部 ,为 顾 
客 提供 更 多 额外 的 增值 服务 ,以 增强 用 户 的 粘性 。 这 部 分 功能 可 以 在 积累 了 一 定 用 户 
后 增加 。 


10.2.3 数据 库 设 计 
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根据 系统 需求 分 析 的 结果 ,进行 数据 库 字 典 的 设计 ,可 以 设计 若干 二 维 表 , 这 些 表 可 以 
用 来 建立 表 结 构 ,编程 时 可 以 作为 参考 。 属 性 PK 为 主键 ,FK 为 外 键 约束 ,Not null 代表 不 
允许 为 空 值 ,具体 有 关 数 据 库 的 知识 可 以 查看 相关 资料 。 


KAH Userinfo, 该 表 用 于 保存 用 户 信 息 , 如 表 10-3 所 示 。 


表 10-3 

字段 名 类 型 属 性 说 明 
uid Int PK,Not null 自动 增长 格式 编号 
uemail varchar(50) Not null 用 户 邮 箱 , 作 登录 名 
urealname Nvarchar(20) Not null 真实 姓名 
upassword varchar(12) Not null 登录 密码 
uaddress Nvarchar(128) Not null 用 户 住址 
upostcode varchar(6) null 邮政 编码 
uphone varchar(16) null 联系 电话 
ucount Decimal(18,2) null 用 户 积分 统计 
uregdatetime datetime null 用 户 注 册 时 间 


KAJ AdminUserinfo ,该 表 用 于 保存 管理 员 用 户 信息 ,如 表 10-4 所 示 。 


表 10-4 

字段 名 类 型 属 性 说 明 
Auid Int РК, Not null 自动 增长 格式 编号 
Auemail varchar(50) Not null 管理 员 邮 箱 , 作 登录 名 
Aurealname Nvarchar(20) Not null 真实 姓名 
Aupassword varchar(12) Not null 登录 密码 
Auaddress Nvarchar(128) Not null 用 户 住址 
Aupostcode varchar(6) null 邮政 编码 
Auphone varchar(16) null 联系 电话 
Aulevel Int null 管理 员 权 限 
Aucreatedatetime datetime null 管理 员 创建 时 间 


KAH CompanyInfo, 该 表 用 于 保存 企业 网 站 系统 信息 ,如 表 10-5 所 示 。 
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表 10-5 

字段 名 类 型 属 性 说 明 
Cid Int PK, Not null 自动 增长 格式 编号 
Ctitle Nvarchar(50) null 网 站 标题 
Cdescribe Nvarchar(100) null 网 站 描述 (搜索 引擎 用 ) 
Ccontent ntext null 企业 简介 
Cnotice ntext null 网 站 公告 信息 
Ccopyright ntext null 网 站 版 权 
Fdelaytime Int Not null Flash 广告 切换 时 间 ( 秒 ) 


表 名 为 Flashbanner, 该 表 用 于 保存 Flash 广告 栏 信息 ,如 表 10-6 所 示 。 


表 10-6 
字段 名 类 型 属 性 说 明 
Fid Int PK,Not null 自动 增长 格式 编号 
Ftitle Nvarchar(50) Not null 广告 标题 
Fpic Nvarchar(255) Not null 展示 图 片 地 址 
Flink Nvarchar(255) Not null 广告 跳 转 链接 
Forder Int Not null 广告 排序 
KAH link, 该 表 用 于 保存 友情 链接 信息 ,如 表 10-7 所 示 。 
表 10-7 
字段 名 类 型 属 性 说 明 
Lid Int PK. Not null 自动 增长 格式 编号 
Ltitle Nvarchar(50) Not null 网 站 标题 
Lpic Nvarchar(255) Not null Logo 地 址 
Llink Nvarchar(255) Not null 链接 网 址 
Lorder Int Not null 友情 链接 排序 
表 名 为 Producttype, 该 表 用 于 保存 商品 分 类 信息 ,如 表 10-8 所 示 。 
Ж 10-8 
字段 名 类 型 属 性 说 明 
PTid Int PK, Not null 自动 增长 格式 编号 
PTtypename Nvarchar(50) null 商品 分 类 名 称 
PTmemo ntext null 分 类 描述 
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表 名 为 ProductInfo ,该 表 用 于 保存 商品 信息 ,如 表 10-9 所 示 。 


表 10-9 
字段 名 类 型 属 性 说 明 

Pid Int РК, Not null 自动 增长 格式 编号 
PTid Int ЕК, пої null 商品 类 型 
Pname Nvarchar(128) Not null 商品 名 称 
Pprice decimal(18,2) Not null 价格 
PminPicURL Nvarchar(255) null 商品 缩 略 图 地 址 
PpicURL Nvarchar(255) Null 商品 图 片 地 址 
Pdescription ntext null 商品 内 容 简介 
Psales Int null 售 出 情况 统计 
Pstock Int null 库存 情况 统计 
PaddadminID Int Not null 添加 管理 员 id 
Pdate Datetime Not null 入 库 时 间 


KAH Newstype, 该 表 用 于 保存 新 闻 分 类 信息 ,如 表 10-10 所 示 。 


表 10-10 
字段 名 类 型 属 性 说 明 
NTid Int PK,Not null 自动 增长 格式 编号 
NTtypename Муагсһаг(50) null 新 闻 分 类 名 称 
NTmemo ntext null 新 闻 分 类 描述 
表 名 为 News, 该 表 用 于 保存 新 闻 内 容 , 如 表 10-11 所 示 。 
Ж 10-11 
字段 名 类 型 属 性 说 明 
Nid Int PK,Not null 自动 增长 格式 编号 
NTid Int ЕК, пог null 新 闻 类 型 
Ntitle Nvarchar(128) Not null 新 闻 标 题 
Ncontent Ntext Not null 新 闻 内 容 
NadminID Int FK,null 添加 新 闻 管 理 员 
Ndatetime Datetime Not Null 添加 新 闻 时 间 


表 名 为 AskMessage, 该 表 用 于 保存 求助 留言 ,如 表 10-12 所 示 。 
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Ж 10-12 
字段 名 类 型 属 性 说 明 
Aid Int PK,FK,Not null 自动 增长 格式 编号 
Auid Int PK,FK,Not null 提问 者 id 
Acaption Nvarchar(50) null 留言 求助 标题 
Acontent ntext null 留言 求助 内 容 
Apublishdate datetime null 发 表 时 间 
表 名 为 ReplyMessage, 该 表 用 于 保存 回复 求助 ,如 表 10-13 所 示 。 
Ж 10-13 
字段 名 类 型 属 性 说 明 
Rid Int PK ,FK ,Not null 自动 增长 格式 编号 
Raid Int PK,FK ,Not null 回复 求助 内 容 的 id 
Radminid Int PK ,FK ,Not null 回复 求助 管理 员 id 
Rcontent ntext null 回复 求助 的 内 容 
Rpublishdate datetime null 发 表 时 间 
表 名 为 Orders, 该 表 用 于 保存 订单 信息 表 , 如 表 10-14 所 示 。 
表 10-14 
字段 名 类 型 属 性 说 明 
oid Int PK. Not null 自动 增长 格式 编号 
OPid int FK ,Not null 商品 编号 
Ouid Int FK ,Not null 用 户 编号 
Oquantity Int Not null 购买 数量 
Ostatus int Not null жекс очки о 
结 ,3 撤销 
Oorderdate datetime Not null 订单 生成 时 间 
OadminId Int FK ,null 处 理 管 理 员 
Ooperationdate datetime null 处 理 时 间 
Ooperationtype Varchar(20) null 处 理 类 型 :已 付款 ,已 发 货 , 已 取消 


在 SQL Server 2005 管理 器 里 新 建 数据 库 , 如 图 10-34 所 示 。 
按照 上 面 的 数据 字典 ,创建 表 结 构 , 如 图 10-35 所 示 。 
仿照 上 述 操作 创建 好 其 余 各 表 , 图 10-36 所 示 为 创建 完成 的 数据 库 , 在 正式 使 用 之 前 ， 


建议 使 用 SQL Server 2005 管理 器 为 里 面 每 一 个 表 添 加 一 组 测试 数据 ,用 来 检验 数据 类 


型 是 否 准确 输入 ,各 表 之 间 的 限制 有 没 做 好 。 同 时 ,在 后 面 进 行 系统 功能 设计 时 ,初始 数据 也 
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是 必须 要 有 的 。 
图 10-37 所 示 为 存在 关系 的 表 间 关系 图 。 


图 10-37 


在 这 节 知识 里 ,要 特别 注意 数据 表 结 构 的 设计 。 对 于 数据 表 结 构 的 设计 ,除了 要 考虑 字 
段 . 字 段 大 小 外 ,特别 要 注意 对 每 个 字段 默认 值 和 有 效 性 规则 的 设 定 , 因 为 如 果 设 置 不 当 的 
话 ,在 网 页 访问 数据 库 时 很 可 能 出 现 错误 。 


10.2.4 版 面 设计 


根据 需求 分 析 的 结果 ,参照 8. 4 节 关 于 网 站 界面 规划 等 的 知识 ,建立 网 站 的 各 个 基本 页 
面 。 一般 企业 网 站 模块 主要 包含 企业 简介 模块 .新 闻 模块 、 产 品 模块 、 下 载 模块 .图 片 模块 、 
招聘 模块 在 线 留言 .反馈 系统 、 在 线 交 流 、 友 情 链接 、 网 站 地 图 、 会 员 与 权限 管理 ,但 要 根据 
实际 企业 需求 而 定 , 本 实例 里 ,主要 用 到 企业 简介 、 新 闻 、 产 品 、 留 言 求助 .友情 链接 会 员 、 订 
单 管 理 等 模块 。 

1. 先 勾 勒 版 面 的 大 致 架构 

图 10-38 所 示 为 网 站 首页 。 本 首页 的 设计 非常 中 规 中 矩 , 因 为 该 企业 的 业务 是 以 技术 
服务 为 主 。Logo 要 放 在 显眼 位 置 . 右 项 部 放置 问候 语 ,查看 购物 车 \ 收 藏 等 以 顾客 为 中 心 的 
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图 10-38 


内 容 , 若 有 必要 ,可 以 加 上 检索 的 功能 。 

Flash Banner 占据 了 比较 显眼 的 位 置 .这 是 为 了 宣传 企业 经 营 特色 而 设置 的 ,里 面 可 以 
放置 多 张 图 片 , 按 一 定时 间 相 继 切 换 , 打 造 深 入 人 心 的 企业 形象 。 

网 站 公告 主要 突出 当前 企业 较 新 、 较 重要 的 通告 ,其 内 容 可 以 由 新 闻 中 心里 抽取 出 来 。 
接 下 来 就 是 方便 客户 登录 的 登录 框 ,登录 之 后 的 用 户 会 在 相同 位 置 显示 客户 的 相关 信息 和 
订单 。 

登录 框 下 面 设 置 产 品 分 类 或 是 热门 产品 ,可 以 吸引 顾客 访问 产品 。 

其 余 的 页 面 , 以 首页 风格 为 蓝本 进行 内 容 增删 即 可 ,各 页 面 风 格 要 统一 ,避免 混乱 。 

2. 企业 形象 设计 与 色彩 选择 

该 公司 成 立时 间 较 短 , 企 业 形象 (VDD) 还 没 建立 ,这 时 就 要 求 我 们 进行 简单 的 形象 设计 
和 企业 色彩 选择 。 

下 面 是 该 企业 的 一 些 简 单 信息 : 

企业 名 称 : 闪电 电脑 维修 中 心 

网 址 : www. flash9pc. com 

根据 企业 提供 的 信息 设计 一 个 简单 的 网 站 Logo, 也 是 企业 标 
志 , 如 图 10-39 所 示 。 
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此 企业 标志 以 蓝 色 ,橙色 为 主 ,色彩 简单 ,对 比 强烈 ,表达 的 内 容 清 晰 。 

企业 VI 色 调 以 代表 高 科技 的 浅 蓝 色 为 主 ,以 橙色 .白色 为 辅 。 

3. 网 站 效果 图 

请 读者 根据 第 4 章 的 网 页 制作 知识 并 根据 初 定 框架 进行 界面 设计 ,效果 可 以 自由 发 挥 。 


10.2.5 功能 实现 


在 数据 库 设计 和 版 面 设计 都 完成 后 ,就 可 以 进行 系统 的 详细 设计 了 。 本 实例 里 ,只 对 重 
要 模块 的 制作 进行 讲解 ,读者 可 在 学 完 后 自行 对 本 系统 进行 完整 设计 。 

1. ASP. NET 批量 建立 数据 库 连接 

以 本 实例 为 例 , 若 用 传统 的 数据 库 链 接 字符 串 ,数据 库 链接 字符 串 如 果 要 改变 ,就 需要 对 
每 一 个 页 面 进行 编辑 ,为 了 简化 操作 ,让 整 站 统一 ,可 以 将 该 变量 存在 web. config 设置 里 ,编辑 
网 站 根 目 录 下 的 web. config 文件 ,在 一 appSettings/ 二 后 添加 以 下 数据 库 连接 字段 : 


<connectionStrings> 
< add name= "501" connectionString="Data source- (local); Initial Catalog= CompanyData 
Security=True" /> 


< /connectionStrings> 
在 连接 数据 库 字 段 里 面 ,用 下 面 的 代码 进行 读 取 : 


string connectionString=ConfigurationManager.ConnectionStrings["SQL"].ConnectionString; 
// 用 configurationmanager 来 读 取 sor 连接 字符 串 


SqlConnection con= new SqlConnection (connectionString); 


2. 在 ASP.NET 里 使 用 母 版 页 

根据 版 面 设计 阶段 制作 好 的 版 面 框架 ,添加 上 颜色 和 图 片 素材 ,将 它 导 出 为 HTML X 
件 。 然 后 将 这 部 分 的 所 有 文件 添加 入 ASP. NET 项 目 里 ,在 此 HTML 页 的 基础 上 ,建立 母 
版 页 ,操作 步骤 如 图 10-40 所 示 。 
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根据 网 站 内 容 编辑 母 版 页 ,将 固定 栏目 的 内 容 设置 为 母 版 页 ,可 改动 的 内 容 用 
ContentPlaceHolder 进行 设 定 , 如 图 10-41 所 示 o 
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其 余 页 面 在 新 建 时 选择 添加 “web 内 容 窗 体 ”, 它 可 以 让 你 选择 可 使 用 的 母 版 页 , 如 
图 10-42 所 示 。 
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图 10-42 


然后 在 新 建 的 页 面 里 添加 上 页 面 的 内 容 即 可 ,如 图 10-43 所 示 。 

3. HTML 页 面 内 容 调用 服务 器 变量 

在 HTML К, nf LGB iE — 96 94 6T ASP. NET 代码 ,将 服务 器 环境 变量 读 取出 
ж) HTML 里 面 。 代 码 如 下 : 


<title> 闪 电 电脑 <sif(Session["tb_ username"] !=nu11) 
1 
Response.Write ("- -尊敬 的 "+ Session["tb username"]+", 欢 迎 您 !1"); 
} 
else 
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EMEN 
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P. 


图 10-43 


Response Write ("- -欢迎 光临 ,请 先 注册 或 登录 ,以 获得 更 好 的 服务 。") ; 


}%>< /title> 


4. 为 数据 库 控件 添加 自 定义 按钮 ,可 以 对 订单 进行 操作 ,如 图 10-44 和 图 10-45 所 示 
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图 10-44 


为 访问 带 参 数 的 aspx 网 页 ,id 的 值 由 数据 列 的 第 一 位 值 赋予 。 

5. 添加 数据 例子 ,版 面 如 图 10-46 所 示 

预先 定义 好 一 个 类 ,用 来 读 写 数据 ,下 面 的 代码 示例 是 写 入 数据 的 类 : 
public static int SaveBClassToDb (BClass bclass) 


t 
// 读 取 数 据 库 连接 字符 串 


网 页 设计 与 网 站 规划 


TAFE W: HyperLintiela MEQ): 
E] зеллі ела. = 
EJ] checkEoxFieli 
El ierLinkgiad 
ка е 
-G ButtorField DataNavi gat eU] Fi el de: Urderln 
в С] саслана Datalievi gat eJr2Tornat3u ing|| or dermunwge. uspx?id- [0] 
ШӘ] TenpleteFieli 


| me anii ане 
Е SESE 
数据 郑 定 ESE 
RFE Е 53 
ЕЕ 
жштш. 
保存 |  LabelLabel 
图 10-46 


string  connectionString =  ConfigurationManager. ConnectionStrings [ " SQL "]. 
ConnectionString; 

// 表 示 到 数据 库 的 一 个 连接 

SqlConnection con- new SqlConnection (connectionString); 

// 构 建 一 个 用 于 执行 sgL 命 令 的 Sql Command Xf 

SqlCommand cmd- new Sq1Command () ; 

// 设 置 连接 对 象 

cmd.Connection- con; 

// 设 置 要 执行 的 命令 

cmd.CommandText- "Inserttb Class"; 


// 设 定 命令 类 型 为 存储 过 程 
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cmd.CommandType= System.Data.CommandType.StoredProcedure; 
cmd.Parameters.AddWithValue ("@ClassName", bclass.ClassName); 
cmd. Parameters .AddWithValue ("GMemo",bclass.Memo) ; 
// 结 果 的 参数 
SqlParameter para=new SqlParameter (); 
para.Value-0; 
para.ParameterName- "GResult"; 
para.SqlDbType- System.Data.SqlDbType.Int; 
// 指 定 参数 为 输入 /输出 参数 
para.Direction=System.Data.ParameterDirection.InputOutput; 
cmd.Parameters.Add (para) ; 
try 
t 
// 打 开 到 数据 库 的 连接 
соп.Ореп (); 
// 执 行 命令 
cmd.ExecuteNonQuery () ; 
return (int)para.Value; 
} 
catch (Exception) 
t 
throw; 
} 
finally 
{ 
con.Close(); 


cmd.Dispose(); 


) 
然后 在 双击 添加 按钮 后 ,Cs 文件 代码 如 下 : 


string className= ClassNameTextBox.Text; 
string memo=MemoTextBox.Text; 
BookShop.BClass bclass=new BookShop.BClass (className, memo); 
// 调 用 自 定义 的 数据 存储 函数 

int result=BookShop.BClass.SaveBClassToDb (bclass); // 获 取 结 果 
if (result ==1) 
{ 

// 用 户 名 已 经 存在 

ClientScript.RegisterStartupScript (GetType () "ClassNameExists", 

"alert ("该 新 闻 类 别 已 经 存在 !!!1');", true); 
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bind(); 
ClientScript.RegisterStartupScript (GetType (), "ClassNameExists", 
"alert ("保存 成 功 !');", true); 

} 


6. 使 用 CKEditor 编辑 HTML 内 容 


CKEditor 是 款 免 费 的 Web 编辑 控件 ,利用 它 可 以 编辑 很 精美 的 HTML 文档 ,如 
图 10-47 所 示 。 
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HRA ASP. NET 的 步骤 如 下 ， 
COD 下 载 CKEditor 放 到 网 站 目录 下 。( 地 址 : http://ckeditor. com/) 
(2) 引用 js: 


<script language-"javascript" type-"text/javascript" src= '«$- ResolveUrl ("~ /ckeditor/ 
ckeditor.js")*» '»« /script» 


(3) 添加 一 个 编辑 框 : 
<asp:TextBox ID- "mckeditor" runat="server" TextMode- "MultiLine">< /asp:TextBox> 


(4) 在 步骤 (3) 创 建 的 编辑 框 下 面 添 加 如 下 代码 。 


«script type- "text/javascript"> 
//« ! [CDATA[ 
CKEDITOR.replace( '«$-mckeditor.ClientID $5 ', 
/ [mckeditor.ClientID 为 TextBox mckeditor 生成 的 对 应 客户 端 看 到 的 ia 


{ 

skin : 'office2003', // 设 置 皮肤 

enterMode : Number (2), // 设 置 snter 键 的 输入 1.« p» 2 у «br/» 3 «div» 
shiftEnterMode : Number (1), // 设 置 shiftenter 的 输入 

р; 

n» 


< /script> 
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经 过 以 下 步骤 基本 功能 已 经 完成 了 ,但 是 有 的 时 候 我 们 要 上 传 文件 ,CKEditor 的 文件 
功能 是 通过 插件 实现 的 ,下 面 介 绍 插件 CKFinder 的 配置 方法 : 

(1) 到 http://www. ckfinder. com/ 下 载 插件 (注意 选择 ASP. NET 版 的 ) , 放 到 网 站 目 
录 下 。 

(2) 在 之 前 的 CKEditor 配置 信息 后 面 添 加 如 下 代码 : 


filebrowserBrowseUrl:'« $-ResolveUrl ("~ /ckfinder/ckfinder.HTML")%> ', 

filebrowserlmageBrowseUrl:'« $- ResolveUrl ("~ /ck£inder/ckfinder.HTML? Type- Images") $> ', 

filebrowserFlashBrowseUrl:'« $-ResolveUrl ("~ /ckfinder/ckfinder.HTML? Type- Flash") %> ', 

filebrowserUploadUrl: ' <% = ResolveUrl ( " ~ /ckfinder/core/connector/aspx/connector. aspx? 
command- QuickUpload&type- Files")$»', 

filebrowserImageUploadUrl:'« %= ResolveUrl ("~ /ckfinder/core/connector/aspx/connector.aspx? 
command- Qui ckUpload&type- Images") %> ' , 

filebrowserFlashUploadUrl:'« $- ResolveUrl ("~ /ckfinder/core/connector/aspx/connector.aspx? 
command- QuickUpload&type- Flash") %> ' 


(3) 修改 config. ascx 文件 中 的 代码 BaseUrl — "/uploads/" (文件 上 传 目录 ) 和 
CheckAuthentication() 上传 身 份 验证 。 

(4) 删除 示例 文件 夹 中 的 fckeditor 相关 的 文件 。( 引 用 了 fckeditor 相关 的 命名 空间 ) 

有 fckeditor. aspx、popup. aspx, popups. aspx 三 个 文件 之 后 使 用 就 基本 没 问 题 了 ,但 是 
如 果 项 目 中 有 几 个 地 方 都 用 到 了 编辑 器 ,就 要 每 个 地 方 都 写 一 段 配置 信息 ,这 样 做 很 麻烦 ， 
所 以 做 了 个 简单 的 控件 ,名 为 mpckeditor. ascx, 代 码 如 下 : 

ascx 文件 ， 


« $8 Control Language- "Cf " AutoEventWireup- "true" CodeFile- "mpckeditor.ascx.cs" Inherits=" 
mpckeditor" $> 

«script language- "javascript" type-"text/javascript" src= '«$- ResolveUrl ("~ /ckeditor/ 
ckeditor.js")$» '»« /script» 

<asp:TextBox ID- "mckeditor" runat="server" TextMode- "MultiLine"» < /asp:TextBox^ 

< script type- "text/javascript"» 

//« ! [CDATA[ 

CKEDITOR. replace ( '«$-mckeditor.ClientID $5 ', 

t 

Skin : 'office2003', 

enterMode : Number( 2), 

shiftEnterMode : Number( 1), 

filebrowserBrowseUrl:'« $- ResolveUrl ("~ /ckfinder/ckfinder.HTML")$» ', 
filebrowserImageBrowseUrl: '« $= ResolveUrl ("~ /ckfinder/ckfinder.HIML? Туре= Images") &» ' , 
filebrowserFlashBrowseUrl:'« $-ResolveUrl ("~ /ckfinder/ckfinder.HTML? Type- Flash") $> ', 
filebrowserUploadUrl: ' <% = ResolveUrl ( " «/ckfinder/core/connector/aspx/connector. aspx? 
command- QuickÜpload&type- Files")&» ', 

filebrowserlmageUploadUrl:'« $-ResolveUrl ("~ /ckfinder/core/connector/aspx/connector.aspx? 
command- Qui ckUpload&type- Images") &» ' , 

filebrowserFlashUploadUrl:'« $&-ResolveUrl ("~ /ckfinder/core/connector/aspx/connector.aspx? 
command- Qui ckUpload&type- Flash") ' 
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n; 
/n» 
</script> 


Cs Xf: 


using System; 

using System.Data; 

using System.Configuration; 

using System.Collections; 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Web.UI.WebControls.WebParts; 

using System.Web.UI.HTMLControls; 

public partial class mpckeditor : System.Web.UI.UserControl 
t 

public string value 

t 

set { mckeditor.Text- value; } 

get ( return mckeditor.Text; } 

) 

protected void Page Load(object sender, EventArgs e) 
{ 

) 


使 用 的 地 方 只 要 把 上 步 建立 的 mpckeditor. ascx 控件 拖 进 来 ,后 台 代码 页 Mpckeditorl. 
value 就 可 以 给 它 赋值 或 获取 值 。 
代码 如 下 : 


<ucl:mpckeditor id= "Mpckeditorl" runat="server" value= "测试 "></ucl:mpckeditor> 

protected void Buttonl Click(object sender, EventArgs e) 

{ 

Response.Write ("< script language = ' javascript ' > alert ('" + HttpUtility. HIMLEncode 

(Mpckeditorl.value)-*";')«/script»"); 

} 

效果 如 图 10-48 和 图 10-49 所 示 。 

最 后 ,将 该 控件 的 值 保存 到 数据 库 中 ,然后 再 在 页 面 里 读 取出 来 ,就 可 以 显示 HTML 
代码 。 

7. 从 数据 库 里 获得 数据 并 输出 到 页 面 

在 前 面 讲 完 数据 库 内 容 的 增加 、 删 除 后 ,现在 要 实现 数据 库 数据 输出 到 页 面 中 ,使 用 以 
下 代码 可 完成 从 数据 库 读 取 网 站 的 版 权 信息 。 


string connectionString=ConfigurationManager.ConnectionStrings["SQL"] .ConnectionString; 
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ASP.NET 中 CKEditor3.2 和 CKFinder1.43 的 配置 和 使 用 ! 


OI 


zi 
body hà pi 
图 10-48 
文件 夹 Ore am „ен онш 
Ci images ; — r- - 
ol 570; 
[4 à ` 
20100303111308jpe | 20100303111330jpe | 20100303111933 jp |_| 20100303111956 jpe 
998f6708da771aafd a0d2b55b-d2b3-3d a0d2b55b-d2b3-3d ddbee7caüfdsddab 
! à Р % | ae e 
€— 
图 10-49 


// 表 示 到 数据 库 的 一 个 连接 
SqlConnection соп= пем SqlConnection (connectionString); 
// 构 建 一 个 用 于 执行 sor 命令 的 Sq Command 对象 
SqlCommand cmd= new SqlCommand() ; 
// 
cmd.Connection= con; 
cmd.CommandText- "SELECT [Ccopyright] FROM [CompanyInfo] WHERE Cid- '1'"; 
//SQL 查 询 语 句 ,从 companyinfo 表 获取 ccopyright 的 值 
try 
t 
соп.Ореп () ; 
// 因 为 只 需要 得 到 一 个 标量 值 , 所 以 使 用 ExecuteScalar Jj 1k 


object value= cmd.ExecuteScalar (); 
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if (value ==пи11) 
{ 
Labell.Text=" 没有 版 权 信息 !"; 
} 
// 得 到 数据 库 中 网 站 简介 的 内 容 
string tb copyright-value as string; 
Labell.Text-tb copyright; 
8. ASP. NET 控制 Flash Banner 显示 的 内 容 
这 里 用 到 XML ,格式 示例 如 下 : 
//sml1.0 标 准 的 数据 ,让 Plash 读 取 并 显示 图 片 内 容 , 设 置 图 片 链接 
«?xml version- "1.0" encoding- "utf- 8"?» 
Xbcaster autoPlayTime- "10"> 
«item id- "7" item url= "uploadfile/20090310091359.jpg" link- "#" /> 
< item id- "6" item url- "uploadfile/20090529102859.jpg" link- "#" /> 
<item id- "5" item url- "uploadfile/20090310091436.jpg" link- "#" /> 
< /bcaster» 
从 数据 库 里 面 读 取出 相关 Flash 的 设置 信息 ,按照 上 面 的 格式 以 XML 输出 。 
假定 Flash 展示 器 文件 地 址 为 images/flash. swf ,设置 插入 HTML 里 面 的 Flash 文件 
地 址 ,使 用 images/flash. swf?bcastr_xml_url=includes/flash. aspx 即 可 。 


10.2.6 测试 与 维护 


1. 测试 和 发 布 网 站 

在 本 地 充分 测试 企业 网 站 系统 的 功能 准确 无 误 后 ,挑选 合适 的 服务 器 或 是 虚拟 主机 提 
供 商 ,这 里 要 注意 的 是 带宽 的 速度 和 服务 器 稳定 性 的 挑选 ,当然 ,要 选用 支持 企业 网 站 所 用 
的 设计 语言 的 ,例如 本 例 采用 的 是 ASP. NET, 就 要 选用 支持 ASP. NET 的 服务 器 ,然后 将 
网 站 发 布 到 服务 器 上 。 

别 忘 了 要 注册 好 站 点 的 域名 ,建议 使 用 . com, 如 果 是 国内 企业 的 话 , 还 可 以 考虑 使 用 
. com. cn ,域名 要 简短 好 记 , 这 个 可 以 参考 本 书 相 关 章 节 。 本 例 使 用 的 是 flash9pc. com, 85 
意 办 电 般 地 救护 计算 机 。 

2. 运行 维护 

网 站 的 内 容 要 及 时 更 新 ,针对 访客 的 提问 或 是 提交 订单 ,要 安排 人 员 及 时 处 理 。 

车 需要 统计 浏览 量 和 收集 访客 IP 信息 ,可 以 通过 放置 免费 统计 网 站 的 代码 来 进行 实时 
收集 ,著名 的 老牌 免费 统计 网 站 有 51yes 统计 、51la 统计 、 站 长 统计 、 谷 歌 分 析 百度 统计 和 
阿里 巴巴 旗下 的 量子 统计 等 。 

举例 来 说 ,在 www. 51уеѕ. com 注册 了 账号 ,获取 了 统计 代码 ,然后 在 网 站 底部 的 网 页 
里 面 , 切 换 到 源 代码 模式 ,在 HTML 代码 里 加 上 了 统计 代码 : — SCRIPT language = 
javascript src 一 "http://countl4. 51yes. com/click. aspx? id = 1405144018-logo = 1" > 
</SCRIPT>. 10 10-50 所 示 。 


жож 综合 实例 


src="http://count14. 51yes. con/click. aspx?id=140514401&logo=1"></SCRIP 
ånbsp:<A class=STYLE14 href="http://www. niibeian. gov. ст T IPE 050592008 </A><A href="http:// 


ХА class=STYLE14 href- http://www. incent. сов” GERE </Аальзр: Sam language-javascript 
ууу. niibeian. gov.cn'?«FONT color=#333333><BR> 


图 10-50 


应 用 以 上 代码 在 统计 时 显示 一 个 图 标 ,所 以 在 页 面 中 要 调整 好 它 的 位 置 ,使 其 美观 ,如 
图 10-51 所 示 。 
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图 10-51 


运行 一 段 时 间 后 ,就 可 以 查看 统计 结果 ,可 分 析 的 内 容 很 多 ,包括 搜索 引擎 关键 字 Ul In] 
者 地 域 . 停 留 时 间 、 回 访 率 等 ,根据 这 些 统计 结果 ,可 以 对 网 站 设计 或 销售 策略 做 改进 等 。 具 
体内 容 请 读者 自行 操作 。 

本 章 虽然 花 了 一 些 篇 幅 介绍 网 站 建设 实例 ,但 部 分 知识 只 是 点 到 为 止 。 希 望 这 一 部 分 
的 知识 ,能 起 到 一 个 良好 的 引导 作用 ,使 读者 有 更 进一步 学 习 网 页 与 网 站 规划 设计 的 兴趣 。 


习题 10 


10-1 MiniSite 类 网 站 的 制作 要 点 有 哪些 ? 

10-2 ”制作 企业 网 站 要 注意 些 什么 ? 

10-3 ”如何 利 用 Photoshop 将 图 片 转换 成 带 超 链接 的 网 页 ? 

10-4 ASP. NET 里 的 “ 母 版 页 "有 什么 作用 ? 

10-5 ” 简 述 网 站 策划 要 经 过 的 步骤 。 请 以 “XX 设 计 工作 室 ” 为 题 ,制作 一 个 宣传 该 工作 室 
作品 和 业务 的 网 站 。 
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